别再一个个删了，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",
           });
         }
       });
     });
   },
 },

---

实现效果