vue实现批量删除

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

      //拿取选中的值
      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'
                    });
                });
            })
    },
上一篇:eclipse编码转换


下一篇:【PaddleNLP】千言数据集:情感分析——SKEP