带filter的datatable中Checkbox全选如何仅选中符合筛选条件的行？

核心逻辑：全选功能的数据源必须和当前表格渲染的过滤后数据绑定，而非原始全量数据。

• 维护两个独立的数据源变量
  • 原始全量数据originData：存储表格全部原始行数据，仅在更新数据源、重置筛选时调用
  • 过滤后数据filteredData：存储用户输入筛选条件后匹配到的可见行数据，表格渲染、全选逻辑均基于该变量
• 重写全选事件逻辑
  全选触发时，不要调用框架默认的全选方法，手动遍历filteredData，将所有可见行的选中状态设为勾选；全选取消时同样仅修改filteredData内的行状态
• 校准全选框状态判断
  全选框的全选/半选/未选状态，仅统计filteredData内的行选中比例，排除不在筛选结果内的行的状态干扰

如果使用Element UI等现成表格组件，可以参考以下自定义全选代码：

// 监听表格select-all事件，覆盖默认全选逻辑
handleSelectAll() {
  // 清空原有选中状态
  this.$refs.tableRef.clearSelection()
  // 仅为过滤后的可见行添加选中状态
  this.filteredData.forEach(row => {
    this.$refs.tableRef.toggleRowSelection(row, true)
  })
}

内容的提问来源于stack exchange，提问作者layla