vxe Table 复选框分页数据记忆选中问题

版本

3.5.0 版本及以上 
1

必要配置

row-config=“{ isCurrent: true, keyField: ‘id’ }”

• isCurrent：当前行是否高亮
• keyField：自定义行数据唯一主键的字段名（默认自动生成）相当于row-id

checkbox-config=“{ checkRowKeys: selectRowsId, reserve: true }”

• checkRowKeys:默认勾选指定行（只会在初始化时被触发一次，需要有 row-id）
• reserve：是否保留勾选状态，对于某些场景可能会用到，比如数据被刷新之后还保留之前选中的状态（需要有 row-id）

参考文档

效果

代码

<template>
  <div>
    <vxe-table
      ref="table"
      resizable
      :data="tableData1"
      :row-config="{ isCurrent: true, keyField: 'id' }"
      :checkbox-config="{ checkRowKeys: selectRowsId, reserve: true }"
      @checkbox-change="changeBox"
      @checkbox-all="changeBoxAll"
    >
      <vxe-column type="checkbox" title="ID" width="280"></vxe-column>
      <vxe-column field="name" title="Name"></vxe-column>
    </vxe-table>
    <vxe-pager
      align="left"
      :current-page.sync="page1.currentPage"
      :page-size.sync="page1.pageSize"
      :total="page1.totalResult"
      @page-change="pageChange"
    >
    </vxe-pager>
    <el-button @click="selectExceed">选择Id大于3的行</el-button>
    <el-button @click="selectBelow">选择ID小于3的行</el-button>
    <el-button @click="clearAll">清除所有已勾选数据</el-button>
  </div>
</template>

<script> export default {
      data() {
        return {
          tableData1: [],
          page1: {
            currentPage: 1,
            pageSize: 5,
            totalResult: 10,
          },
          selectList: [],
        };
      },
      computed: {
        selectRowsId() {
          return this.selectList.map((item) => item.id);
        },
      },
      created() {},
      mounted() {
        this.handlerSearch();
      },
      methods: {
            // 搜索
            handlerSearch(currentPage, pageSize) {
              this.page1.currentPage = Number(currentPage) ? Number(currentPage) : 1;
              this.page1.pageSize = Number(pageSize) ? Number(pageSize) : 5;
              this.queryTable();
            },
            // 分页
            pageChange({ currentPage, pageSize }) {
              this.handlerSearch(currentPage, pageSize);
            },
            // 获取数据
            async queryTable() {
              const { data } = await this.$axios("/api/list", {
                params: {
                  currentPage: this.page1.currentPage,
                  pageSize: this.page1.pageSize,
                },
              });
              if (data?.code === 0) this.tableData1 = data.list;
            },
            // 单个选择
            changeBox({ records }) {
              this.handlerSelectRow(records);
            },
            // 全选
            changeBoxAll({ records }) {
              this.handlerSelectRow(records);
            },
            // 处理表格中选择的行！！！！！
            handlerSelectRow(current = []) {
              const tab = this.$refs.table;
              const reserves = tab && tab.getCheckboxReserveRecords();
              const result = reserves.concat(current);
              console.log('选择的rows',result);
            },
            // 选择大于3的ID
            selectExceed(){
              const tab = this.$refs.table;
              let row = this.tableData1.filter(item => item.id > 3)
               tab && tab.setCheckboxRow(row, true);
               this.handlerSelectRow(row)
            },
            // 选择小于3的ID
            selectBelow(){
              const tab = this.$refs.table;
              let row = this.tableData1.filter(item => item.id < 3)
               tab && tab.setCheckboxRow(row, true);
               this.handlerSelectRow(row)
            },
            // 清除所有选项
            clearAll(){
              const tab = this.$refs.table 
              tab && tab.clearCheckboxReserve()
              tab && tab.clearCheckboxRow()
              this.selectList = []
            }
      },
}; </script>

<style lang="less" scoped>
</style> 
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111