vue+element的表格中批量删除功能

Z时代
2024-01-10
分类：综合

vue

记录一下实现“批量删除”需要注意的问题

页面效果

表格代码

data中代码如下

 data() {
      return {
        tableData: [],
        tableChecked:[],//被选中的记录数据-----对应“批量删除”传的参数值
        ids:[],//批量删除id
      };
    },

在method中添加handleSelectionChange方法

 handleSelectionChange(val) {
        console.log("handleSelectionChange--",val)
        this.tableChecked = val
      },

控制台打印数据结构如下：

调用后台接口

 //批量删除
    batchDelete(rows){  
        var _this = this;
          _this.$confirm('是否确认此操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          rows.forEach(element =>{
            _this.ids.push(element.chargingStationId)
          })
          let param = {
            "token": getSessiontoken('token'),
            "chargingStationIdList":_this.ids
          }
          deleteAllCharging(param).then(function (res) {
            var obj = JSON.parse(utilFile.decrypt(res.data.a));
            if (obj.code == '200') {
              _this.$message.success('操作成功');
               _this.chargingUserList();
            } else {
              _this.$message.error(obj.msg);
            }
          }).catch(function (err) {
            console.log(err);
          })
        }).catch(() => {
           alert(2)
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
    },