element-ui之el-table翻页后仍然记忆所选项

淋雪小新

已于 2022-08-18 14:17:56 修改

阅读量300

点赞数

分类专栏：前端 vue 文章标签： vue.js 前端 elementui

于 2022-08-18 13:12:36 首次发布

本文链接：https://blog.csdn.net/zxl_start/article/details/126403784

版权

前端同时被 2 个专栏收录

59 篇文章 2 订阅

订阅专栏

vue

57 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Element UI的el-table组件，使其在分页后仍能记住用户的选中项。通过`v-loading`和`ref`属性，配合`toggleRowSelection`方法，展示了如何在`handleSelectionChange`和`showTag`方法中维护多选状态。适合前端开发者学习表格组件的交互优化。

摘要由CSDN通过智能技术生成

element-ui之el-table翻页后仍然记忆所选项

     <el-table
          :data="tableData"
          style="width: 100%"
          border
          v-loading="loading"
           ref="multipleTable"
          @select="handleSelectionChange"
          @select-all="handleSelectionChangeAll"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
    </el-table>
     getInStoreList() {
          this.tableData = res.data;
          this.showTag();
      },
        showTag() {
      let handleSelectData = this.multipleSelection || [];
      console.log(handleSelectData, "handleSelectData");
      for (let i = 0; i < this.tableData.length; i++) {
        for (let j = 0; j < handleSelectData.length; j++) {
          if (this.tableData[i].rid === handleSelectData[j].rid) {
            this.$nextTick().then(() => {
              this.$refs.multipleTable.toggleRowSelection(
                this.tableData[i],
                true
              );
            });
          }
        }
      }
    },
    // 单选
    handleSelectionChange(val, row) {
      if (val.includes(row)) {
        this.multipleSelection.push(row);
      } else {
        let index = -1;
        this.multipleSelection.some((e, i) => {
          if (e.rid === row.rid) {
            index = i;
            return true;
          }
        });
        this.multipleSelection.splice(index, 1);
      }
    },
    // 全选
    handleSelectionChangeAll(val) {
      if (val.length === 0) {
        this.tableData.forEach((t) => {
          let index = -1;
          this.multipleSelection.some((e, i) => {
            if (e.rid === t.rid) {
              index = i;
              return true;
            }
          });
          this.multipleSelection.splice(index, 1);
        });
      } else {
        val.forEach((e) => {
          let ids = this.multipleSelection.map((m) => m.rid);
          if (!ids.includes(e.rid)) {
            this.multipleSelection.push(e);
          }
        });
      }
    },