项目的一个需求需要实现多选删除。这里记录一下自己实现的方法。
1、获取多选选中行的数据
查了官网文档中有这样一个方法可以获取选中的数据
handleSelectionChange(val) {
this.multipleSelection = val
console.log('多选选中的行', this.multipleSelection)
},
Tips:点击某一行，选中改行前面复选框的方法
<el-table @row-click="checkViews" ref="NodeTable" :data="list"
@selection-change="handleSelectionChange">
// methods中
checkViews(row){
this.ableCheck = true // 判断选中状态
this.$refs.NodeTable.toggleRowSelection(row);
},
在删除按钮上绑定Alldelete这个方法，@click="Alldelete"
Alldelete() { // 多选删除
if (this.ableCheck) {
this.$confirm('确定删除?', '删除提示', {
cancelButtonText: '取消',
confirmButtonText: '确定',
type: 'warning'
}).then(() => { // 写一个循环逐条执行删除操作，这里的deleteNodeCode是调用的接口。
for(let i = 0 ; i < this.multipleSelection.length; i++){
console.log(this.multipleSelection[i].nodeCode)
deleteNodeCode(this.multipleSelection[i].nodeCode)
}
}).then(() => {
console.log(this.list)
this.getList() //获取删除后的表格
this.$message({
type: 'success',
message: '删除成功'
})
})
} else {
this.$confirm('请先选择表单', '删除提示', {
confirmButtonText: '确定',
type: 'warning'
})
}
}
