最近开发遇到一个需要对表格数据进行批量删除的需求，其实配合element实现这个操作非常简单，关键就在于表格绑定的
@selection-change="handleSelectionChange"事件，这个事件可以拿到选框选中的值，然后在通过map()方法循环遍历拿到对应的id值，将拿到的id值赋值给后台需要的ids参数，最后将其传递给后台即可。
html代码
<div class="sphere">
<div class="btnClick">
<!--// batchDelect点击事件 -->
<!--// :disabled="this.sels.length === 0" 如果没有数据让删除按钮失效 -->
<el-button type="primary" @click="batchDelect(sels)" :disabled="this.sels.length === 0">批量删除</el-button>
</div>
<div class="TableList">
<!--// 绑定事件 selection-change 当选择项发生变化时会触发该事件 -->
<!--// row-click 当某一行被点击时会触发该事件 -->
<el-table :data="tableData" align="center" v-loading="loading" border
@selection-change="handleSelectionChange" @row-click="openDetails">
<!--// 选框 -->
<el-table-column type="selection" width="40"></el-table-column>
<el-table-column prop="clbh" label="车辆编号" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="sssgs" align="center" label="所属省公司" show-overflow-tooltip></el-table-column>
<el-table-column prop="gssyy" align="center" label="归属实验员" show-overflow-tooltip></el-table-column>
<el-table-column prop="kjcxm" align="center" label="可检测项目" show-overflow-tooltip></el-table-column>
<el-table-column prop="kssysj" align="center" label="最近检修时间" show-overflow-tooltip></el-table-column>
<el-table-column prop="lxrdh" align="center" label="联系人电话" show-overflow-tooltip></el-table-column>
<el-table-column prop="jwd" align="center" label="当前经纬度" show-overflow-tooltip></el-table-column>
<el-table-column prop="sscs" align="center" label="所在城市" show-overflow-tooltip></el-table-column>
<el-table-column prop="gzzt" align="center" label="工作状态" show-overflow-tooltip></el-table-column>
<el-table-column prop="zxrws" align="center" label="已执行任务数" show-overflow-tooltip></el-table-column>
</el-table>
</div>
</div>
data
data() {
return {
tableData: [],//表格的数据
sels: [], //当前选框选中的值
ids: "",//id值
};
},
js
这边后端要求我传递的参数是字符串的形式，解析后是 1,2,3,4,5；
如果后端需要数组形式可以用JSON.stringify(this.ids)传递,解析后是[1,2,3,4,5]
//拿取选中的值
handleSelectionChange(sels) {
this.sels = sels
console.log('选中的值', this.sels)
},
//批量删除
batchDelect() {
// 删除前的提示
this.$confirm('确认删除记录吗?', '提示', {
type: 'warning'
})
.then(() => {
// this.sels.map(item => item.id) 循环sels拿到里面的id值，将拿到的id赋值给ids
this.ids = this.sels.map(item => item.id)
let data = {
ids: this.ids, //后台要求传递的参数
}
// deleteVehiclds 请求接口
deleteVehiclds(data).then(res => {
this.$message({
message: '删除成功',
type: 'success'
});
});
})
},