TDesign的Table组件如何实现跨页选择数据？

你这个问题挺典型的，主要是因为分页切换时表格组件只保留当前页的数据状态，之前选中的行状态确实会被重置。解决方法是自己手动管理选中状态，并且在数据加载时做校验。

具体做法是：把所有选中的 rowKey 存在一个全局数组里（你已经这么做了），然后在每次加载数据时，遍历 allData，给每个数据项加上一个 _checked 字段（或者类似的标志位），表示它是否被选中。

以下是改写后的代码：

export default {

  data() {

    return {

      selectedRowKeys: [],

      allData: [/* 大量分页数据 */],

      currentPageData: [] // 当前页显示的数据

    }

  },

  methods: {

    handleSelectChange({ selectedRowKeys }) {

      this.selectedRowKeys = [...new Set(selectedRowKeys)]; // 去重

    },

    updateCurrentPageData(pageData) {

      this.currentPageData = pageData.map(row => ({

        ...row,

        _checked: this.selectedRowKeys.includes(row.rowKey)

      }));

    },

    onPageChange(newPage, pageSize) {

      // 假设这里从 allData 或接口获取当前页的数据

      const start = (newPage - 1) * pageSize;

      const end = start + pageSize;

      const pageData = this.allData.slice(start, end);



      this.updateCurrentPageData(pageData);

    }

  },

  created() {

    // 初始化第一页数据

    this.onPageChange(1, 10); // 默认每页10条

  }

}

注意几点：
1. 在 handleSelectChange 方法里用了 Set 去重，防止重复选择同一个 rowKey。
2. 每次分页切换时重新计算当前页数据的选中状态。
3. 如果是从后端拉取数据，记得在请求回来后再调用 updateCurrentPageData。

最后提醒一下，如果 rowKey 是用户可控的（比如直接传入了前端参数），要做校验，防止注入攻击或者其他安全性问题。虽然看起来只是个简单功能，但安全细节不能忽略。

你这个问题挺常见的，主要是因为分页切换时表格重新渲染了当前页的数据，而TDesign的Table组件默认只维护当前页的选中状态。要实现跨页选中，你需要手动管理所有选中的rowKey，并且在数据源中标识哪些行已经被选中。

直接上改造后的代码：

export default {

  data() {

    return {

      selectedRowKeys: new Set(), // 用Set效率更高

      allData: [/* 大量分页数据 */],

    }

  },

  methods: {

    handleSelectChange({ selectedRowKeys, rowKey }) {

      // 使用Set来存储选中的rowKey，避免重复和方便查找

      if (selectedRowKeys.length > this.selectedRowKeys.size) {

        // 如果是新增选中

        selectedRowKeys.forEach(key => this.selectedRowKeys.add(key));

      } else {

        // 如果是取消选中

        rowKey.forEach(key => this.selectedRowKeys.delete(key));

      }

    },

    getRowKey(row) {

      return row.id; // 确保每行有唯一标识符

    },

    isRowSelected(row) {

      return this.selectedRowKeys.has(this.getRowKey(row));

    }

  }

}

然后在Table组件的配置里加上这两个属性：
- row-key：绑定到getRowKey方法。
- reserve-selection：设置为true，告诉组件需要保留选中状态。

最后记得在渲染表格行时，根据isRowSelected方法来动态设置选中状态。

这样改的好处是用Set结构查重和判断更快，性能更高，特别是在大数据量的情况下。别忘了确保每行数据都有唯一的id或类似字段作为rowKey，不然会出问题。