1、添加一个批量删除的按钮
<el-button
type="danger"
icon="el-icon-delete"
@click="delAll"
:disabled="multipleSelection.length === 0" //判断用户是否点击选择
style="margin-left:15px;" >
一键删除
</el-button>
如上图所示,当没有选中任何一项时,批量删除按钮是不可点击的,当选中其中一项或多项时,批量删除按钮变成可点击;
2、在el-table标签内添加点击复选框的事件和点击行的事件
<el-table
v-loading="listLoading"
:data="datalist"
@selection-change="handleSelectionChange" //多选,当选择项发生变化时会触发该事件
@row-click="handleRowClick" //点击每行时触发事件
ref="handSelectTest_multipleTable" //添加属性
row-key="id"
>
3、 手动添加一个el-table-column
,设type
属性为selection
即可;
<el-table-column
type = 'selection'
label="全选"
width="55"
:reserve-selection="true"> //选择其他页时,之前页选的的框依然存在
</el-table-column>
如果要获取不同页的数据进行操作,利用reserve-selection,这在官方文档中有说明
需要注意的是使用reserve-selection属性必须配合row-key(不然会报错)
4、 最后在方法中添加点击复选框、点击行和根据id批量删除的方法
methods: {
//点击复选框触发,复选框样式的改变
handleSelectionChange(val) {
console.log(val) //打印选中的行集合
this.multipleSelection = val;
},
//点击行触发,选中或不选中复选框
handleRowClick(row, column, event) {
this.$refs.handSelectTest_multipleTable.toggleRowSelection(row);
console.log(row) //打印的时当前选中的行
},
//点击批量删除
delAll(){
var arr=[]
//遍历点击选择的对象集合,拿到每一个对象的id添加到新的集合中
this.multipleSelection.forEach(row=>arr.push(row.id))
this.$confirm('确定删除吗', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'success',
callback: action => {
if (action === 'confirm') {
//批量删除
delAllIpserver(arr).then(response => {
this.$notify({
title: '删除成功',
message: '',
type: 'success',
duration: 2000
})
this.getList() //重新加载页面的方法
}).catch(() => {
console.log('error submit')
})
}
}
})
}
}
效果图