vue项目中表格中批量删除

Posted 2023-05-06

参考技术A 注：如果后台将单个删除和批量删除写的是同一个接口，并且通过数组对象的id删除，请往下看！！！

一、首先肯定要先写删除按和批量删除按钮吧

1、单个删除的按钮

2、批量删除按钮

二、重点来了！！！

1、单个删除按钮的事件（注：接口我全部写在一个js中了，所以你看到的就是这样哦）

2、批量删除按钮的事件

注：其中delist是data里面定义的变量，SelectChange（）是el-table中的 @selection-change的事件

初来乍到，请求指教，

vue实现批量删除

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

html代码

    <div class="sphere">
        <div class="btnClick">
            <!--// batchDelect点击事件 -->
            <!--// :disabled="this.sels.length === 0" 如果没有数据让删除按钮失效 -->
            <el-button type="primary" @click="batchDelect(sels)" :disabled="this.sels.length === 0">批量删除</el-button>
        </div>
        <div class="TableList">
            <!--// 绑定事件 selection-change 当选择项发生变化时会触发该事件 -->
            <!--// row-click 当某一行被点击时会触发该事件 -->
            <el-table :data="tableData" align="center" v-loading="loading" border
                @selection-change="handleSelectionChange" @row-click="openDetails">
                <!--// 选框 -->
                <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-column prop="sscs" align="center" label="所在城市" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gzzt" align="center" label="工作状态" show-overflow-tooltip></el-table-column>
                <el-table-column prop="zxrws" align="center" label="已执行任务数" show-overflow-tooltip></el-table-column>
            </el-table>
        </div>
    </div>

data

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

js

这边后端要求我传递的参数是字符串的形式，解析后是 1,2,3,4,5；
如果后端需要数组形式可以用JSON.stringify(this.ids)传递,解析后是[1,2,3,4,5]

      //拿取选中的值
      handleSelectionChange(sels) {
        this.sels = sels
        console.log('选中的值', this.sels)
      },
      //批量删除
      batchDelect() {
        // 删除前的提示
        this.$confirm('确认删除记录吗?', '提示', {
                type: 'warning'
            })
            .then(() => {
                // this.sels.map(item => item.id) 循环sels拿到里面的id值，将拿到的id赋值给ids
                this.ids = this.sels.map(item => item.id)
                let data = {
                    ids: this.ids, //后台要求传递的参数
                }
                // deleteVehiclds 请求接口
                deleteVehiclds(data).then(res => {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                });
            })
    },