vue实现批量删除

最新推荐文章于 2024-05-13 01:49:18 发布

诗琪_.

最新推荐文章于 2024-05-13 01:49:18 发布

阅读量2.8k

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_64411343/article/details/126583496

版权

<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() {
   return {
     tableData: [],//表格数据
     sels: [], //当前选框选中的值
   };
 },

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