vue实现批量删除

最新推荐文章于 2024-09-27 15:03:02 发布

诗琪_.

最新推荐文章于 2024-09-27 15:03:02 发布

阅读量2.9k

点赞数 2

文章标签： vue.js elementui javascript

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

版权

本文介绍了一个基于Vue.js的批量删除功能实现案例。该案例详细展示了如何通过选中表格中的特定行来触发批量删除操作，并在确认后调用后端API进行数据删除。此外，还介绍了如何使删除按钮在没有选中任何行时处于禁用状态。

摘要由CSDN通过智能技术生成

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