1.常见的el-table多选删除功能:
<el-table :data="tableData" @selection-change="handleSelectionChange">
js: 将选择的id保存在一个数组里面,可以使用forEach或者map(map可以直接返回一个数组,较为方便)
// 表格复选框 数据
handleSelectionChange(val) {
this.changArr = []
val.forEach((item) => {
this.changArr.push(item.idBq)
})
},
然后就是删除操作:
// 批量删除
deleteDatafile() {
if (this.changArr.length > 0) {
this.$confirm('此操作将永久批量删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
removeTag({
idbqs: this.changArr,
}).then((res) => {
if (res && res.data.data) {
this.$message.success('删除成功')
this.queryData()
}
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除',
})
})
}
},
2.单选删除:直接使用 @select="select",在这个方法里面将数据前面的复选框回显上
<el-table :data="tableData" @select="select">
js部分:
// 单选
select(selection, row) {
if (selection.length > 1) {
let del_row = selection.shift()
this.$refs.table.toggleRowSelection(del_row, false)
}
this.xmdmArr = []
this.chooseList = []
this.xmdmArr.push(row.xmdm)
this.chooseList = row.bqszdx.map((item) => {
return item.idBq
})
},