1、多选删除过第一次后,下次多选选中的数据累加之前删除的数据
第一次删除
在这里插入图片描述
第二次删除
在这里插入图片描述
细心的你会发现,第二次只选中了两条数据,但是得到确是跟之前删除的累加总和了,如果第三次选中2条,则就是5条了
2、代码:

// 复选框选中
onSelectChange(electedRowKeys, selectedRows) {
  this.selectedRowKeys = electedRowKeys
  this.ids = this.selectedRowKeys;
},

如果你打印选中的方法中的electedRowKeys参数。你就会发现问题所在了,根本不是删除一次更新一次,所以自己就需要在删除成功后调用选中的方法onSelectChange,即:

(主要代码:that.onSelectChange([], []))
// 删除表格某个数据
    del(id) {
      // 解决报未定义的错
      let that = this;
      // 判断是多选还是单选
      let delType = id instanceof Array;
      let length = 0;
      let changeId = "";
      if (delType) {
        // 多条
        length = id.length;
        // 数组转字符串
        changeId = id.join(",");
      } else {
        changeId = id;
      }
      that.$confirm({
        title: delType
          ? `您确定要删除这${length}个站点吗?`
          : "您确定要删除该站点吗?",
        content: "删除后不可恢复哦",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          // 调用删除接口
          delData(changeId).then((res) => {
            if (res.data.code === 0) {
              // 调用多选方法,清空调之前选中的数据,不然会累加
              that.onSelectChange([], [])
              // 删除成功更新数据
              if (delType) {
                // 如果是多选,遍历id数组
                id.forEach((item) => {
                  // 通过选中的id与原对象数组的id判断,不相同则留着
                  that.tableData = that.tableData.filter((it) => it.id != item);
                });
              } else {
                // 单选则直接把选中的id和原对象数组的id比较
                that.tableData = that.tableData.filter(
                  (it) => it.id != changeId
                );
              }
              // 判断是否删除完当前页数据并且总页码数大于1,则加载上一页或下一页数据
              if (that.tableData.length == 0 && (that.pagination.total/that.pageSize) > 1 && that.pageNum == parseInt(that.pagination.total/that.pageSize)) {
                // 当前页码等于总页码数,加载上一页(最后一页)
                that.pageNum--
                that.getData(that.pageNum, 10)
              } else if (that.tableData.length == 0 && (that.pagination.total/that.pageSize) > 1 && that.pageNum < parseInt(that.pagination.total/that.pageSize)) {
                // 当前页码数小于总页码数,加载下一页(第一页或者中间页)
                that.pageNum++
                that.getData(that.pageNum, 10)
              }
            }
          });
        },
        onCancel() {
          // 关闭提示
        },
      });
    },

每次删除成功后调用选中的方法,给参数初始化,这样就可以每次删除后拿到的选中的值都是最新的了
最后点击删除:(调用删除方法)

// 点击表格上的删除按钮
    delMore() {
      // 判断是否选中
      if (this.ids && this.ids.length) {
        // 调用删除方法
        this.del(this.ids);
      }
    },

有山就有路,有河就能渡!

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐