elementui表格批量删除
时间: 2023-02-28 07:10:21 浏览: 243
vue+element的表格实现批量删除功能示例代码
Element UI 表格的批量删除功能可以通过以下步骤实现:
1. 在表格的每一行添加一个复选框,用来选择要删除的行。
2. 编写一个删除按钮,点击按钮时会删除选择的所有行。
3. 在删除按钮的点击事件中,遍历表格中所有行,如果该行的复选框被选中,则将其从表格中删除。
4. 最后,在数据源中更新删除的数据。
代码实现如下:
```
<template>
<el-table :data="tableData">
<el-table-column type="selection" />
<!-- ... -->
</el-table>
<el-button @click="handleBatchDelete">批量删除</el-button>
</template>
<script>
export default {
data() {
return {
tableData: [
{ /* ... */ },
{ /* ... */ },
// ...
]
};
},
methods: {
handleBatchDelete() {
this.$confirm('确定删除选中数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let deletedData = [];
this.tableData.forEach((item, index) => {
if (item._isSelected) {
deletedData.push(item);
}
});
deletedData.forEach(item => {
let index = this.tableData.indexOf(item);
this.tableData.splice(index, 1);
});
this.$message({
type: 'success',
message: '删除成功'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
}
};
</script>
```
注意:上面的代码仅作为示例,请根据实际需求
阅读全文