element ui <el-table>分页多选如何实现

https://element.eleme.cn/#/zh-CN/component/table

 每次点击下一页时,将勾选的数据保存起来,去重,并从保存起来的数据中找出本页需要自动勾选的数据

          if (Array.isArray(this.selectedCourseRowTemp)) {
            const moreData = [
              ...this.selectedCourseRowTemp,
              ...this.selectedCourseRow,
            ];
            let resultData = [];
            for (let i = 0; i < moreData.length; i++) {
              let repeat = false;
              for (var j = 0; j < resultData.length; j++) {
                if (moreData[i].id === resultData[j].id) {
                  repeat = true;
                  break;
                }
              }
              if (!repeat) {
                resultData.push(moreData[i]);
              }
            }
            this.selectedCourseRowTemp = resultData;
          }
          

         this.$nextTick(() => {
            setTimeout(() => {
              const needSelectRows = this.tableData.filter((item) => {
                let resultTempItemIndex = -1;
                if (Array.isArray(this.selectedCourseRowTemp)) {
                  resultTempItemIndex = this.selectedCourseRowTemp.findIndex(
                    (tempItem) => {
                      return item.id === tempItem.id;
                    }
                  );
                }

                return resultTempItemIndex >= 0;
              });
              // const rows = [this.tableData[1]];
              this.handleAutoSelect(needSelectRows);
            }, 100);
          });
        <el-table
          ref="multipleTable"
          :data="tableData"
          border="true"
          height="350"
          style="width: 100%"
          tooltip-effect="dark"
          highlight-current-row
          @selection-change="handleSelectCourseChangeMult"
          :option="option"
          @row-click="handleClickCourseRowMult"
        ></el-table>   







   handleTest() {
      const rows = [this.tableData[1]];
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row, true);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleAutoSelect(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row, true);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    handleClickCourseRowMult(row) {
      if (row) {
        this.selectedCourseRow = row;
        this.$refs.multipleTable.toggleRowSelection(row);
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectCourseChangeMult(selection) {
      this.selectedCourseRow = selection;
    },

猜你喜欢

转载自blog.csdn.net/xutongbao/article/details/125655506