console
var Main = {
data () {
return {
gridData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
gridOptions: {
border: true,
resizable: true,
keepSource: true,
showOverflow: true,
height: 530,
loading: false,
pagerConfig: {
total: 0,
currentPage: 1,
pageSize: 10,
pageSizes: [10, 20, 50, 100, 200, 500]
},
editConfig: {
trigger: 'dblclick', mode: 'cell',autoClear: true,
},
columns: [
{ type: 'seq', width: 60 },
{ type: 'checkbox', width: 50 },
{ field: 'name', title: 'Name', editRender: {}, slots: { edit: 'name_edit' } },
{ field: 'nickname', title: 'Nickname', editRender: {}, slots: { edit: 'nickname_edit' } },
{ field: 'sex', title: 'Sex', editRender: {}, slots: { default: 'sex_default', edit: 'sex_edit' } },
{ field: 'role', title: 'Role', editRender: {}, slots: { edit: 'role_edit' } },
{ field: 'describe', title: 'Describe', showOverflow: true, editRender: {}, slots: { edit: 'describe_edit' } },
{ title: '操作', width: 200, slots: { default: 'operate' } }
],
data: []
},
sexList1: [
{ value: '1', label: '男' },
{ value: '0', label: '女' }
]
}
},
created () {
setTimeout(() => {
this.gridOptions.loading = false
this.gridOptions.pagerConfig.total = 10
this.gridOptions.data = [
{ id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: '1', age: 28, address: 'Shenzhen' },
{ id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: '0', age: 22, address: 'Guangzhou' },
{ id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: '1', age: 32, address: 'Shanghai' },
{ id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: '0', age: 23, address: 'Shenzhen' },
{ id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: '0', age: 30, address: 'Shanghai' },
{ id: 10006, name: 'Test6', nickname: 'T6', role: 'Develop', sex: '0', age: 27, address: 'Shanghai' },
{ id: 10007, name: 'Test7', nickname: 'T7', role: 'Develop', sex: '1', age: 29, address: 'Shenzhen' },
{ id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: '0', age: 32, address: 'Shanghai' },
{ id: 10009, name: 'Test9', nickname: 'T9', role: 'Develop', sex: '1', age: 30, address: 'Shenzhen' },
{ id: 10010, name: 'Test10', nickname: 'T10', role: 'Develop', sex: '0', age: 34, address: 'Shanghai' }
]
}, 300)
}
};
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-pc-ui@3.2.8/lib/style.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table@3.11.4/lib/style.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils@3.5.31/dist/xe-utils.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table@3.8.24/lib/index.umd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<template>
<div>
<vxe-grid ref="xGrid" v-bind="gridOptions">
<template #name_edit="{ row }">
<vxe-input v-model="row.name"></vxe-input>
</template>
<template #nickname_edit="{ row }">
<vxe-input v-model="row.nickname"></vxe-input>
</template>
<template #sex_edit="{ row }">
<el-select popper-class="vxe-table--ignore-clear" v-model="row.sex" type="text" transfer>
<el-option v-for="item in sexList1" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
</vxe-select>
</template>
<template #role_edit="{ row }">
<el-popover
popper-class="vxe-table--ignore-clear"
placement="top"
width="400"
trigger="click">
<el-table :data="gridData">
<el-table-column width="150" property="date" label="日期"></el-table-column>
<el-table-column width="100" property="name" label="姓名"></el-table-column>
<el-table-column width="300" property="address" label="地址"></el-table-column>
</el-table>
<el-button slot="reference">click 激活</el-button>
</el-popover>
</template>
<template #describe_edit="{ row }">
<vxe-input v-model="row.describe"></vxe-input>
</template>
</vxe-grid>
</div>
</template>
</div>