Bootstrap

antd table 跨页选取数据

如果需要使用跨页的selectedRows;如下

// template
<a-table :rowSelection="{selectedKeys:selectedRowKeys,onChange:onSelectChange}">
slotxxx
</a-table>
//script
<script>
data(){
return {
selectedRowKeys :[],// 选中项的key值集合
selectedRows :[],// 选中项的rows 集合  组件默认为当前页选中项
}
}
methods:
   onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      let allRows = this.selectedRows.concat(selectedRows);
      let curRows = allRows.filter((item) => {
        return selectedRowKeys.includes(item.id);
      })
      let filtered = curRows.reduce((total, next) => {
        let has = total.some((f) => {
          return f.id === next.id
        })
        return has ? total : total.concat([next])
      }, [])
      this.selectedRows = filtered;
    }
</script>

版本信息

  1. ant-design-vue:"^1.3.16"
  2. selectedRowKeys 组件抛出的变量 自身携带 跨页功能
  3. allRows合并之前的数据和当前页的数据
  4. filtered 是对allRows进行去重主键是id ,可用其他任意去重方法
  5. filtered 主要是因为当前页数据多次操作 会出现重复数据选中项目
;