antd4 Table实现翻页勾选

---

前言

antd4 官方 Table 组件没有提供多选翻页后仍然保留上一页选中项的功能，但我们可以通过 rowSelection 的 onSelect、onSelectAll 事件自己实现该功能。实现后的效果如下：

---

一、部分loadsh方法了解

为了使代码更加简洁，我们可以使用 loadsh 提供的部分方法：

• ​​​​​_.remove(array, [predicate=_.identity])

移除数组中predicate（断言）返回为真值的所有元素，并返回移除元素组成的数组。

var array = [1, 2, 3, 4];
var evens = _.remove(array, function(n) {
  return n % 2 == 0;
});
 
console.log(array);
// => [1, 3]
 
console.log(evens);
// => [2, 4]

1
2
3
4
5
6
7
8
9
10
11

• ​​​​​_.map(collection, [iteratee=_.identity])

创建一个数组， value（值） 是 iteratee（迭代函数）遍历 collection（集合）中的每个元素后返回的结果。
参数
collection (Array|Object): 用来迭代的集合。
[iteratee=_.identity] (Array|Function|Object|string): 每次迭代调用的函数。
返回
(Array): 返回新的映射后数组。

function square(n) {
  return n * n;
}
 
_.map([4, 8], square);
// => [16, 64]
 
_.map({ 'a': 4, 'b': 8 }, square);
// => [16, 64] (iteration order is not guaranteed)
 
var users = [
  { 'user': 'barney' },
  { 'user': 'fred' }
];
 
// The `_.property` iteratee shorthand.
_.map(users, 'user');
// => ['barney', 'fred']
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• ​​​​​_.uniqBy(array, [iteratee=_.identity])

参数
array (Array): 要检查的数组。
[iteratee=_.identity] (Array|Function|Object|string): 迭代函数，调用每个元素。
返回
(Array): 返回新的去重后的数组。

_.uniqBy([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }], 'x');
// => [{ 'x': 1 }, { 'x': 2 }]
1
2

• _.concat(array, [values])

创建一个新数组，将array与任何数组 或 值连接在一起。

var array = [1];
var other = _.concat(array, 2, [3], [[4]]);
 
console.log(other);
// => [1, 2, 3, [4]]
 
console.log(array);
// => [1]
1
2
3
4
5
6
7
8

• _.includes(collection, value, [fromIndex=0])

检查 value(值) 是否在 collection(集合) 中。如果 collection(集合)是一个字符串，那么检查 value（值，子字符串） 是否在字符串中， 否则使用SameValueZero 做等值比较。 如果指定 fromIndex 是负数，那么从 collection(集合) 的结尾开始检索

参数
collection (Array|Object|string): 要检索的集合。
value (*): 要检索的值。
[fromIndex=0] (number): 要检索的 索引位置。
返回
(boolean): 如果找到 value 返回 true， 否则返回 false。

_.includes([1, 2, 3], 1);
// => true
 
_.includes([1, 2, 3], 1, 2);
// => false
 
_.includes({ 'user': 'fred', 'age': 40 }, 'fred');
// => true
 
_.includes('pebbles', 'eb');
// => true

1
2
3
4
5
6
7
8
9
10
11
12

二、代码实现

const [selectedRows, setSelectedRows] = useState<any[]>([]); // 选中的所有行数据
const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]); // 选中的所有行数据 id 集合

const onSelect = (record: any, selected: boolean) => {
  const mySelectedRows = selectedRows;
  if (selected) {
    mySelectedRows.push(record);
  } else {
    _.remove(mySelectedRows, (o: any) => o.id === record.id);
  }
  const mySelectedRowKeys = _.map(mySelectedRows, 'id');
  setSelectedRowKeys(mySelectedRowKeys as number[]);
  setSelectedRows(mySelectedRows);
};

const onSelectAll = (selected: boolean, selectedRow: any, changeRows: any) => {
  let mySelectedRows = selectedRows;
  const changeRowKeys = _.map(changeRows, 'id');
  if (selected) {
    // 先连接再进行一次去重
    mySelectedRows = _.uniqBy(_.concat(mySelectedRows, changeRows), 'id');
  } else {
    // 先判断包含再移除
    _.remove(mySelectedRows, (o: any) => _.includes(changeRowKeys, o.id));
  }
  const mySelectedRowKeys = _.map(mySelectedRows, 'id');
  setSelectedRowKeys(mySelectedRowKeys);
  setSelectedRows(mySelectedRows);
};
  
const rowSelection = {
  selectedRowKeys,
  onSelect: onSelect,
  onSelectAll: onSelectAll,
};

// Table 组件
<Table
  rowKey="id"
  dataSource={dataList}
  rowSelection={rowSelection}
  columns={columns}
  pagination={pagination}
  bordered
  scroll={{ y: 470 }}
/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46