element ui ＜el-table＞分页多选如何实现

原创已于 2022-07-08 16:32:22 修改 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

于 2022-07-07 11:27:51 首次发布

web前端专栏收录该内容

736 篇文章

订阅专栏

博客聚焦前端表格操作，提及在点击下一页时，要保存勾选的数据，对其进行去重处理，并且从保存的数据里找出本页需自动勾选的数据，涉及前端开发中表格交互的关键操作。

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

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

          if (Array.isArray(this.selectedCourseRowTemp)) {
            let moreData = [];
            const haveDeleteItemArr = this.needSelectRows.filter(item => this.selectedCourseRow.findIndex(currentItem => currentItem.id === item.id) < 0)
            if (Array.isArray(this.selectedCourseRow)) {
              moreData = [
                ...this.selectedCourseRowTemp,
                ...this.selectedCourseRow,
              ];
            } else if (typeof this.selectedCourseRow === "object") {
              moreData = [
                ...this.selectedCourseRowTemp,
                this.selectedCourseRow,
              ];
            } else {
              moreData = [...this.selectedCourseRowTemp];
            }
            moreData = moreData.filter(item => haveDeleteItemArr.findIndex(deleteItem => deleteItem.id === item.id) < 0)

            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(() => {

        <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;
    },