# ant-vue table组件selectedRows翻页后不保留上一页已选的解决方案

实现selectedRowKeys, selectedRows翻页后数据同步

vue方法

rowSelectionOption (selectedRowKeys, selectedRows) {
  this.selectedRowKeys = selectedRowKeys
  if (this.selectedData.length > 0) {
    this.selectedData = MergeArray(this.selectedData, selectedRows, this.selectedRowKeys)
  } else {
    this.selectedData = selectedRows
  }
}
1
2
3
4
5
6
7
8

相关函数

  // ant-vue table组件selectedRows翻页后不保留上一页已选的解决方案
  // 解决selectedRowKeys, selectedRows同步选中并且保存
  /**
     * 数据去重 
     * @param {*} arr1 翻页后需要保存的数据
     * @param {*} arr2 当前页选中的数据
     * @param {*} arr3 当前页及翻页选中的key值
     * @param {*} key 当前表格唯一值,可替换为你的唯一值 (比如id)
  */
     export const MergeArray = (arr1, arr2, arr3, key='productNo') => {
      var _arr = []
      for (var i = 0; i < arr1.length; i++) {
        _arr.push(arr1[i])
      }
      for (var x = 0; x < arr2.length; x++) {
        var flag = true
        for (var j = 0; j < arr1.length; j++) {
          if (arr2[x][key] === arr1[j][key]) {
            flag = false
            break
          }
        }
        if (flag) {
          _arr.push(arr2[x])
        }
      }
      _arr = spliceArray(_arr, arr3 ,key)
      return _arr
    }
    /**
     * 删除未选择的数据
     */
    const spliceArray =  (arr1, arr2, key) => {
      var _arr = []
      for (var x = 0; x < arr1.length; x++) {
        for (var j = 0; j < arr2.length; j++) {
          if (arr1[x][key] === arr2[j]) {
            _arr.push(arr1[x])
          }
        }
      }
      return _arr
    }
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