vue基于element实现批量删除

最近开发遇到一个需要对表格数据进行批量删除的需求，其实配合element实现这个操作非常简单，关键就在于表格绑定的 @selection-change="handleSelectionChange" 事件，这个事件可以拿到选框选中的值，然后在通过 map() 方法循环遍历拿到对应的id值，将拿到的id值赋值给后台需要的ids参数，最后将其传递给后台即可。

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",
           });
         }
       });
     });
   },
 },