1.el-table的批量删除
需要用到ref和element自带的事件selection-change(当前项发生改变的时候触发)
<el-table ref=“multipleTable” @selection-change="handleSelectionChange">
<el-table-column>.....</el-table-column>
</el-table>
<el-button @click="multipleDelete"></el-button>
export default {
data() {
multipleSelection:[],
arr:[],
},
methods: {
handleSelectionChange(val) {
//console.log(val) //打印选中的行
this.arr = val;
},
multipleDelete() {
this.$refs.multipleTable.selection.forEach(element => {
this.multipleSelection.push(element)
});
console.log("删除选中的",this.multipleSelection);
this.$confirm(`将永久删除, 是否继续?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(()=>{this.接口(this.multipleSelection)
.then(()=>{
}).catch(err=>{
})
})
}
}
2.iview-table 同理 ref和iview库
<Table ref="multipleTable" @on-selection-change="selectChange">
</Table>
<Button @click="multipleDelete">批量删除</Button>
export default {
data() {
multipleSelection:[],
},
methods:{
selectChange(selection) {
this.multipleSelection = selection;
},
multipleDelete() {
let arr = [];
for (let i = 0; i < this.multipleSelection.length; i++){
arr[i] = this.multipleSelection[i].id;
};
console.log("id:",arr);
console.log("删除的",this.multipleSelection);
},
}
}