解决antv table组件 rowSelection 选择功能翻页后不保留前数据

antdv 官方组件 table 选择功能多选，在onChange方法分页重新加载数据后，之前所选择的selectedRowKeys全部清空了。

翻页之后不保留上一页已经选中的数据。

接下来是解决方法

🥳 react 的解决方法

react的table在版本4.4.0中，rowSelect加上了preserveSelectedRowKeys，官方文档的说明是：

Keep selection `key` even when it removed from `dataSource`

也就是说，antd提供了preserveSelectedRowKeys，类型为布尔值，为true的时候，在数据更新之后记住之前选择的数据。

🥳 vue 的解决方法

前面我们说了react，但vue的antdv官方文档没有这个玩意啊。

这个时候我们就要用onSelect和onSelectAll这两种方法来解决一下了

首先是 onSelect 方法，就是单独勾选一个选项的时候：

onSelect: (record, selected, selectedRows) => {
    if (selected) {
        this.selectedRows.push(record)
    } else {
        const delIndex = this.selecedRows.findIndex(val => {
            return val.id = record.id
        })
        this.selectedRows.splice(delIndex, 1)
    }
}

其次是 onSelectAll 方法，就是全选当前页的时候：

onSelectAll: (selected, selectedRows, changeRows) => {
    if (selected) {
        this.selectedRows = this.selectedRows.concat(changeRows)
    }
    
    if (!selected) {
        let selectedRows = JSON.parse(JSON.stringify(this.selectedRows))
        const delIndex = []
        selectedRows.forEach((item, index) => {
          changeRows.forEach((val, itemIndex) => {
            if (item.id === val.id) {
              delIndex.push(index)
            }
          })
        })
        delIndex.forEach((item) => {
          delete selectedRows[item]
        })
        selectedRows = selectedRows.filter((item) => {
          return item !== undefined
        })
        this.selectedRows = selectedRows
    }
}

this.selectedRows 就是选中的数据

📝 记录一下，好记性不如烂笔头