vue

解决el-table全选取消全选及翻页数据保存问题

2022-11-18  本文已影响0人  上海_前端_求内推

1,html代码


image.png

2,字段说明,tableData2为请求的列表数据,roleUserLists为回显数据

// 全选/取消全选
    Allofthem(val, row) {
        // 如果为空,则为清除选项状态,此时将table中的所有内容都从saveCheckList移除
          if (val && val.length == 0) {
            this.tableData2.forEach((row) => {
              // 从保存项saveCheckList里面寻找,如果找到了row则删除
              let fitemIndex = this.roleUserLists.findIndex((item) => {
                return item.userCode == row.userCode;
              });
              // 找到了就删除掉
              if (fitemIndex >= 0) {
                this.roleUserLists.splice(fitemIndex, 1);
              }
            });
          } else if (val && val.length != 0 && this.roleUserLists.length != 0) {
            // 如果不为空,且this.saveCheckList也不为空则从val里面找
            val.forEach((row) => {
              // 从保存项saveCheckList里面寻找,如果找到了row则删除,如果没找到则添加
              let fitemIndex = this.roleUserLists.findIndex((item) => {
                return item.userCode == row.userCode;
              });
              // 没找到就push进去
              if (fitemIndex < 0) {
                this.roleUserLists.push(row);
              }
            });
          } else if (val && val.length != 0 && this.roleUserLists.length == 0) {
            val.forEach((row) => {
              this.roleUserLists.push(row);
            });
          }
      //
    },
    // 单选/取消单选
    Radioselect(val, row) {
      debugger;
      // that.roleUserLists
      let selected = val.length && val.indexOf(row) !== -1; //selected为true时为选中,false时为未选中
      if (selected) {
        this.roleUserLists.push({
          userCode: row.userCode,
          userName: row.userName,
        });
        console.log(this.roleUserLists);
      } else {
        // 从保存项roleUserLists里面寻找,如果找到了row则删除,如果没找到则添加
        let fitemIndex = this.roleUserLists.findIndex((item) => {
          return item.userCode == row.userCode;
        });
        // 找到了就删除掉
        if (fitemIndex >= 0) {
          this.roleUserLists.splice(fitemIndex, 1);
        }
      }
      //
    },

3,加载勾选的列表及勾选回显

GetuserList() {
      var that = this;
      that.loading = true;
      that.$axios
        .get(that.$baseService.getqualityuserslit, {
          params: that.formselect2,
        })
        .then(function (res) {
          that.total2 = res.data.totalCount;
          that.tableData2 = JSON.parse(JSON.stringify(res.data.items));
          that.loading = false;
          var rows = that.roleUserLists;
          that.$nextTick(() => {
            that.tableData2.forEach(function (row, index) {
              rows.forEach(function (row2, index2) {
                if (row2.userCode == row.userCode) {
                  that.$refs.table2.toggleRowSelection(row, true);
                }
              });
            });
          });
        })
        .catch(function (error) {
          that.loading = false;
        });
    },
上一篇下一篇

猜你喜欢

热点阅读