别再一个个删了，vue + element 帮你轻松批量删除

前言

我们在开发 web 应用程序时，删除操作是非常常见的需求。而对于 vue 开发者来说，使用 element UI 来实现批量删除操作不仅方便快捷，而且也能提高代码的可维护性。在本文中，我们将介绍如何使用 vue 和 element UI 来实现批量删除功能，该功能可使您更高效地处理数据。让我们开始吧。

实现思路

实现这个操作的关键就在于表格需要绑定 @selection-change="handleSelectionChange" 事件，这个事件可以拿到选框选中行的值，前提是手动添加一个 el-table-column，设 type 属性为 selection，拿到值后通过循环遍历取到后台需要的参数，最后请求接口将参数传给后台即可。

话不多说，下面进入实战

html

<template><div class="sphere"><div><!-- :disabled="this.sels.length === 0" 如果没有数据让删除按钮失效 --><el-button type="primary" @click="batchDelect" :disabled="this.sels.length === 0">批量删除</el-button></div><div class="TableList"><!-- 绑定事件 selection-change 当选择项发生变化时会触发该事件 --><el-table :data="tableData" align="center" border @selection-change="handleSelectionChange"><!-- 选框 --><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></div></div>
</template>

data

 data() {return {tableData: [],//表格数据sels: [], //当前选框选中的值};},

js

methods: {//获取选中的值handleSelectionChange(sels) {this.sels = sels;console.log("选中的值",sels.map((item) => item.id));},//批量删除执行操作batchDelect() {// 删除前的提示this.$confirm("确认删除记录吗?", "提示", {type: "warning",}).then(() => {let ids = this.sels.map((item) => item.id);// 根据后台想要的参数格式选择// console.log(ids.join(",")); //1,2,3,4// console.log(ids); //[1,2,3,4]// 请求接口deleteVehiclds({ ids: ids }).then((res) => {if (res.code == "10000") {this.$message({message: "删除成功",type: "success",});}});});},},

实现效果