vxe-table 利用 vxe-grid 实现动态配置表格
<template>
<div style="padding:100px">
<vxe-grid
ref="xTable"
:max-height="450"
v-bind="gridOptions"
show-overflow
keep-source
highlight-hover-row
highlight-current-row
resizable
auto-resize
:row-config="{ isCurrent: true, isHover: true,keyField:'id' }"
:edit-config="{trigger: 'manual', mode: 'row'}"
>
>
<template #operation="{ row }">
<vxe-button type="text" status="primary" @click="deleteRow(row)">删除</vxe-button>
<span v-if="$(row)">
<vxe-button type="text" status="primary" @click="saveRow()">保存</vxe-button>
<vxe-button type="text" status="primary" @click="cancelRow(row)">取消</vxe-button>
</span>
<span v-else>
<vxe-button type="text" status="primary" @click="editRow(row)">编辑</vxe-button>
</span>
</template>
</vxe-grid>
</div>
</template>
<script>
import { colConfig, tableData } from './colConfig'
export default {
data() {
return {
gridOptions: {
columns: [],
data: [],
},
}
},
created() {
this.getTableData()
},
methods: {
getTableData() {
// 1.设置表格列
this.gridOptions.columns = colConfig
// 2.设置表格数据
this.gridOptions.data = tableData
// 3.添加操作列
let operationCol = {
title: '操作',
slots: { default: 'operation' },
align: 'center'
}
this.gridOptions.columns.push(operationCol)
},
deleteRow(row) {
let index = this.gridOptions.data.findIndex(item => item.id === row.id)
this.gridOptions.data.splice(index, 1)
},
editRow(row) {
const $table = this.$refs.xTable
$table.setActiveRow(row)
},
saveRow() {
const $table = this.$refs.xTable
$table.clearActived().then(() => {
this.loading = true
setTimeout(() => {
this.loading = false
}, 300)
})
},
cancelRow(row) {
const $table = this.$refs.xTable
$table.clearActived().then(() => {
// 还原行数据
$table.revertData(row)
})
}
}
}
</script>