vxe-table 表格删除
时间: 2023-11-15 22:58:16 浏览: 240
删除表格.vi
vxe-table表格删除可以通过以下步骤实现:
1. 在表格中添加一个操作列,用于显示删除按钮。
2. 在操作列中使用vxe-button或者其他按钮组件,并绑定点击事件。
3. 在点击事件中获取当前行的索引,可以使用rowIndex或者其他方式获取。
4. 调用表格的remove方法,传入当前行的索引,即可删除当前行。
具体实现可以参考以下代码:
<vxe-table :data="tableData">
<vxe-column title="姓名" field="name"></vxe-column>
<vxe-column title="年龄" field="age"></vxe-column>
<vxe-column title="操作" width="100">
<template #default="{ row, column, rowIndex, columnIndex }">
<vxe-button type="text" @click="delRow(rowIndex)">删除</vxe-button>
</template>
</vxe-column>
</vxe-table>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 }
]
}
},
methods: {
delRow(index) {
this.$refs.table.remove(index)
}
}
}
</script>
阅读全文