console
var app = new Vue({
el: '#app',
data () {
return {
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: 'manual',
mode: 'row',
showStatus: true,
icon: 'fa fa-file-text-o'
},
columns: [
{ type: 'seq', width: 60,fixed:'left' },
{ type: 'checkbox', width: 50,fixed:'left' },
{ field: 'name', title: 'Name', editRender: { name: 'input' }, fixed:'left' },
{ field: 'nickname', title: 'Nickname', editRender: { name: 'input' } },
{ field: 'sex', title: 'Sex', editRender: { name: '$select', options: [] } },
{ field: 'role', title: 'Role', editRender: { name: 'input' } },
{ field: 'describe', title: 'Describe', showOverflow: true, editRender: { name: 'input' }, width: 300 },
{ title: '操作', width: 200, slots: { default: 'operate' } }
],
data: [],
mergeCells: [
{ row: 0, col: 3, rowspan: 2, colspan: 1 }
]
}
}
},
created () {
setTimeout(() => {
// 异步更新下拉选项
if (this.$refs.xGrid) {
const column = this.$refs.xGrid.getColumnByField('sex')
column.editRender.options = [
{ value: '1', label: '男' },
{ value: '0', label: '女' }
]
}
}, 300)
this.findList()
},
methods: {
findList () {
this.gridOptions.loading = true
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' },
{ id: 10010, name: 'Test10', nickname: 'T10', role: 'Develop', sex: '0', age: 34, address: 'Shanghai' },
{ id: 10010, name: 'Test10', nickname: 'T10', role: 'Develop', sex: '0', age: 34, address: 'Shanghai' },
{ id: 10010, name: 'Test10', nickname: 'T10', role: 'Develop', sex: '0', age: 34, address: 'Shanghai' },
{ id: 10010, name: 'Test10', nickname: 'T10', role: 'Develop', sex: '0', age: 34, address: 'Shanghai' },
{ id: 10010, name: 'Test10', nickname: 'T10', role: 'Develop', sex: '0', age: 34, address: 'Shanghai' },
{ id: 10010, name: 'Test10', nickname: 'T10', role: 'Develop', sex: '0', age: 34, address: 'Shanghai' },
{ id: 10010, name: 'Test10', nickname: 'T10', role: 'Develop', sex: '0', age: 34, address: 'Shanghai' },
{ id: 10010, name: 'Test10', nickname: 'T10', role: 'Develop', sex: '0', age: 34, address: 'Shanghai' },
{ id: 10010, name: 'Test10', nickname: 'T10', role: 'Develop', sex: '0', age: 34, address: 'Shanghai' }
]
}, 300)
},
searchEvent () {
this.gridOptions.pagerConfig.currentPage = 1
this.findList()
},
handlePageChange ({ currentPage, pageSize }) {
this.gridOptions.pagerConfig.currentPage = currentPage
this.gridOptions.pagerConfig.pageSize = pageSize
this.findList()
},
editRowEvent (row) {
this.$refs.xGrid.setActiveRow(row)
},
saveRowEvent () {
this.$refs.xGrid.clearActived().then(() => {
this.gridOptions.loading = true
setTimeout(() => {
this.gridOptions.loading = false
this.$XModal.message({ message: '保存成功!', status: 'success' })
}, 300)
})
},
removeRowEvent (row) {
this.$XModal.confirm('您确定要删除该数据?').then(type => {
if (type === 'confirm') {
this.$refs.xGrid.remove(row)
}
})
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css">
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
<div id="app" style="width:100vw;height:100vh;">
<vxe-grid
ref="xGrid"
v-bind="gridOptions"
@page-change="handlePageChange"
>
<template #operate="{ row }">
<template v-if="$refs.xGrid.isActiveByRow(row)">
<vxe-button icon="fa fa-save" status="primary" title="保存" circle @click="saveRowEvent(row)"></vxe-button>
</template>
<template v-else>
<vxe-button icon="fa fa-edit" title="编辑" circle @click="editRowEvent(row)"></vxe-button>
</template>
<vxe-button icon="fa fa-trash" title="删除" circle @click="removeRowEvent(row)"></vxe-button>
<vxe-button icon="fa fa-eye" title="查看" circle></vxe-button>
<vxe-button icon="fa fa-gear" title="设置" circle></vxe-button>
</template>
</vxe-grid>
</div>