vue实现批量删除

Posted 2021-11-07 水星记_

最近开发遇到一个需要对表格数据进行批量删除的需求，其实配合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'
                    });
                });
            })
    },