vxe复选框分页勾选的处理

1. 存在的问题

在vxe组件中定义勾选事件后，如果还有分页的功能，那么基本的勾选事件将存在一定的缺陷，如：当翻页的时候会丢失翻页前已勾选的数据。
设计两页数据：

使用基本的勾选事件:

    checkboxChange() {
      this.checkedRows = this.$refs.table.getCheckboxRecords()
    },
    selectAllCheckboxChange(checked) {
      this.checkedRows = checked.records
    },

勾选两页的数据后：


虽然第一页的数据显示已经勾选，但是checkedRows中只有第二页的数据。

2. 解决方法

2.1 vxe标签

在vxe标签中需要添加的属性：

row-id="id"
:checkbox-config="{ reserve: true }" 

2.2 勾选事件

    // 复选框事件(保留翻页选中的数据)
    checkboxChange({ checked, records, reserves, row }) {
      // console.log(checked ? '勾选事件' : '取消事件')
      // console.log('当前选中的数据：' + records)
      // console.log('翻页时其他页的数据：' + reserves)
      // console.log('当前选中的数据行：' + row )
      //勾选选中时
      if (checked) {
        //第一次选数据，还未进行翻页时
        if (reserves.length == 0){
          this.selectionRows = records;
        }else {
          //数据集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectionRows = [...reserves,...records];
        }
      }else {
        //取消选中时
        this.selectionRows = this.selectionRows.filter(item => item.id !== row.id)
      }
    },
    //vxe复选框当前页全选中方法(保留翻页选中的数据)：
    selectAllCheckboxChange({ checked, records, reserves}) {
      // console.log(checked ? '勾选事件' : '取消事件')
      // console.log('当前选中的数据：' + records)
      // console.log('翻页时其他页的数据：' + reserves)
      //全选中时
      if (checked) {
        //第一次选数据，还未进行翻页时
        if (reserves.length == 0){
          this.selectionRows = records;
        }else {
          //数据集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectionRows = [...reserves,...records];
        }
      }else {
        //取消全选时,直接将翻页数据赋值，当前页数据不用加上
        this.selectionRows = reserves;
      }
    },

此时在进行翻页选其他页的数据时，还能保留前面选中的数据的功能。

如果有删除翻页时其他页的数据的需求，可以使用this.$refs.xTable.clearCheckboxReserve() 方法清除。

完整代码

<template>
  <button @click="save()">确定</button>
  <vxe-grid
      border
      ref="table"
      row-id="id"
      style="width: 500px"
      :data="tableData"
      :columns="tableColumn"
      :checkbox-config="{ reserve: true }"
      :pager-config="tablePage"
      @page-change="handlePageChange"
      @checkbox-change="checkboxChange"
      @checkbox-all="selectAllCheckboxChange"
  >
  </vxe-grid>
</template>

<script>
export default {

  name: "VxeCheck",
  data() {
    return {
      tableData: [
        {id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc'},
        {id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou'},
      ],
      tableColumn: [
        { type: 'checkbox', width: 50 },
        { field: 'name', title: 'Name', width: 150, align: 'center' },
        { field: 'sex', title: 'Sex', align: 'center'},
        { field: 'age', title: 'Age', align: 'center' },
        { field: 'address', title: 'Address', align: 'center' },
      ],
      tablePage: {
        total: 4,
        currentPage: 1,
        pageSize: 2,
        align: 'left',
        pageSizes: [2, 3],
        layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total'],
        perfect: true
      },
      /*table选中records*/
      selectionRows : [],
    }
  },
  methods: {
    // 复选框事件(保留翻页选中的数据)
    checkboxChange({ checked, records, reserves, row }) {
      // console.log(checked ? '勾选事件' : '取消事件')
      // console.log('当前选中的数据：' + records)
      // console.log('翻页时其他页的数据：' + reserves)
      // console.log('当前选中的数据行：' + row )
      //勾选选中时
      if (checked) {
        //第一次选数据，还未进行翻页时
        if (reserves.length == 0){
          this.selectionRows = records;
        }else {
          //数据集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectionRows = [...reserves,...records];
        }
      }else {
        //取消选中时
        this.selectionRows = this.selectionRows.filter(item => item.id !== row.id)
      }
    },
    //vxe复选框当前页全选中方法(保留翻页选中的数据)：
    selectAllCheckboxChange({ checked, records, reserves}) {
      // console.log(checked ? '勾选事件' : '取消事件')
      // console.log('当前选中的数据：' + records)
      // console.log('翻页时其他页的数据：' + reserves)
      //全选中时
      if (checked) {
        //第一次选数据，还未进行翻页时
        if (reserves.length == 0){
          this.selectionRows = records;
        }else {
          //数据集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectionRows = [...reserves,...records];
        }
      }else {
        //取消全选时,直接将翻页数据赋值，当前页数据不用加上
        this.selectionRows = reserves;
      }
    },
    save() {
      console.log(this.selectionRows)
    },
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      if (pageSize === 2 && currentPage === 1) {
        this.tableData = [
          {id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc'},
          {id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou'},
        ]
      }
      if (pageSize === 2 && currentPage === 2) {
        this.tableData = [
          {id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai'},
          {id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 23, address: 'test abc'}
        ]
      }
    }
  }
}
</script>

<style scoped>

</style>