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

2023年2月17日 107次阅读 来源: xiongdaandxiaomi

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

页面效果

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

表格代码

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

data中代码如下

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

在method中添加handleSelectionChange方法

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

控制台打印数据结构如下：
《vue+element的表格中批量删除功能》

调用后台接口

 //批量删除
    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: '已取消'
          });
        });
    },
    原文作者：xiongdaandxiaomi
    原文地址: https://blog.csdn.net/xiongdaandxiaomi/article/details/83504571
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞