简要

业务场景中，经常会出现跨页选择的需求。在vue2中，el-table自带有reserve-selection属性，再加上指定row-key属性，就可以实现基本的功能。

上述方法仅能实现单向，即跨页选中并保存的业务。

但有时候会出现，在编辑中根据id数组，回显出之前选择的行数据，并且支持再次编辑。

解决方案

核心为对列表数据的重新选择

  // 重新选中当前页,已选中的选项
    setSelectedRows(){
      // 使用 Set 来存储 selectedRows 中的 id，以提高查找速度
      const selectedIds = new Set(this.selectedRows.map(row => row.id))
      // 遍历 tableList 并根据 selectedIds 设置选择状态
      this.tableList.forEach(item => {
        if (selectedIds.has(item.id)) {
          this.$nextTick(() => {
            this.$refs.table.toggleRowSelection(item, true);
          });
        }
      });
    },

对表格的选中操作要分成三种方法处理

// 选择数据
    selectOne(val, row) {
      // 如果 row.id 存在于 this.selectedRows 但不在 val.id 中，则从 this.selectedRows 中删除这一项
      if (this.selectedRows.some(selectedRow => selectedRow.id === row.id) && !val.some(selectedVal => selectedVal.id === row.id)) {
        this.selectedRows = this.selectedRows.filter(selectedRow => selectedRow.id !== row.id)
      }
    },
    // 表格全选操作
    selectAll(val, row) {
      if (val.length === 0) {
        // 此时为取消当页全选
        this.tableList.map(item => {
          this.selectedRows = this.selectedRows.filter(selectedRow => selectedRow.id !== item.id)
        })
      }
    },
    handleSelectionChange(val) {
      // 先合并 val 和 this.selectedRows
      const combinedRows = [...this.selectedRows, ...val]
      // 使用 Map 来存储 dvpId 和对应的 val，这样可以自动去重
      const map = new Map()
      combinedRows.forEach(item => {
        // 如果 dvpId 已经存在，则不覆盖
        if (!map.has(item.id)) {
          map.set(item.id, item)
        }
      })
      // 将 Map 转换回数组
      this.selectedRows = Array.from(map.values())
    }

以上仅为个人业务使用理解，如有优化或问题，欢迎探讨。