【vue+vex-table】翻页保留复选框选中状态

1、项目中的vxe-table封装成了组件，方便复用，

vxe-table主要用到这些，key可以换成 row-id=“id”，我这里没用到

<vxe-table
  ref="vxeTable"
 :key="tableKey"
  :data="dataSource"
  @checkbox-all="selectAllEvent"
  @checkbox-change="selectAllEvent"
>
>      <vxe-column type="checkbox" width="60" fixed="left"  :header-align="'center'" :align="'center'" :resizable="false"></vxe-column>
>      
  <vxe-column></vxe-column>
  </vxe-table> 
1
2
3
4
5
6
7
8
9
10
11

2、组件是否封装不影响需求的实现，就是refs多点了一层

3、有两种实现方式：

方式一：不考虑切换总条数（假如用户在勾选过程中，切换了每页显示的总条数，数据会乱）
1、 @selectAllEvent=“selectAllEvent”，复选框单选或全选事件，
定义 selectedData: {},//以分页为key的对象，
将分页数据以key为1，值为数组的形式保存，比如当前分页是第一页selectedData：{1：records}，
setCheckedRow :[],//当前页选中的所有项

复选框事件中把当前页的存到对应的分页下，点击分页调列表接口时，再根据每一页的数组进行回显

  selectAllEvent(checked) {
      const { records } = checked
      let pageNum = this.queryParams.pageNum
      this.setCheckedRow = records
      if (!this.selectedData[pageNum]) {
        this.selectedData[pageNum] = []
      }
      this.selectedData[pageNum] = records
  },
1
2
3
4
5
6
7
8
9

//分页列表刷新

getList（）
{    const res = await getList(this.queryParams)
      this.listSource= res.data.rows 
       let checkedArr = []
      for (const key in this.selectedData) {
        if (key == this.queryParams.pageNum) {
          checkedArr = this.selectedData[key]
        }
      }
      this.$nextTick(() => {
        if (checkedArr.length) {
      this.$nextTick(() => {
          if (this.checkedArr.length) {
            this.listSource.forEach(item => {
              if (this.checkedArr.some(checkedItem => checkedItem.id === item.id)) {
                this.$refs.invoiceVxeTable.$refs.vxeTable.setCheckboxRow(item, true)
              }
            })
          }
        }) }  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

方式二：考虑用户会切换总条数
setCheckedRow:[],//当前页选中的所有项

 selectAllEvent(checked) {
 const { records } = checked
      this.setCheckedRow.push(...records)
      this.setCheckedRow = this.reduceSame(this.setCheckedRow)
      //过滤一个未选中的noCheckedList
      let noChecklist = this.listSource.filter(v => !records.some(vi => vi.id == v.id))
      this.setCheckedRow = this.setCheckedRow.filter(v => !noChecklist.some(vi => vi.id == v.id))
      }

    reduceSame(arr) {
      let obj = {}
      return arr.reduce(function (prev, item) {
        obj[item.id] ? '' : (obj[item.id] = 1 && prev.push(item))
        return prev
      }, [])
    },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

分页获取列表

 async getList(flag) {
      const res = await getList(this.queryParams)
      this.listSource= res.data.rows
        this.$nextTick(() => {
          if (this.setCheckedRow.length) {
            this.listSource.forEach(item => {
              if (this.setCheckedRow.some(checkedItem => checkedItem.id === item.id)) {
                this.$refs.invoiceVxeTable.$refs.vxeTable.setCheckboxRow(item, true)
              }
            })
          }
        })
      
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

方式二实现思路：

selectAllEvent 方法：
1、从参数 checked 中解构出 records，（已勾选的数组），
2、将已勾选的数组添加到已选数组，使用展开运算符 … 以避免创建新的数组对象。
3、调用 reduceSame 方法对 setCheckedRow 数组进行去重，并覆盖原有数组。
reduceSame 方法：
接受一个数组 arr 作为参数。
创建一个空对象 obj 用于计数，并返回使用 reduce 方法遍历数组后得到的结果数组。
在 reduce 方法的回调函数中，对于每个新的 item，先检查 obj 中是否有该 id 的键。如果没有，则将其添加到 prev 数组中，并在 obj 中设置该键的值为 1；否则什么都不做。
最后返回去重后的结果数组。
4、定义noChecklist 数组，找出未选项
5、过滤已选项
getList 方法：
调用异步方法 getList 获取数据列表，并更新 listSource。
使用 $nextTick 方法等待下一个 DOM 更新周期之后执行回调函数。因为在更新表格选中状态时，需要先等待 Vue.js 将变更应用到 DOM 中，才能正确地操作表格组件。
如果有已选项 setCheckedRow，则遍历 listSource中的所有项，并检查是否有该项在已选数组中。如果有，则使用 $refs 获取表格组件的实例，并设置该行为选中状态。