vxe-table 切页回显checkbox选中状态

我用的是vuex 渲染数据，可直接带值进去使用

store/modules/test.js

import _ from 'lodash'
const state = {
  tableData: [], // 存储表格数据
  selectedRows: [], // 存储选中的行
  currentPage: 1, // 当前页码
  pageSize: 10, // 每页显示的数量
  totalItems: 0, // 数据总数
  searchForm: {
    name: ''
  }, // 搜索文本
  selectedAllRows: [],  // 处理换页选中的框
  checkAll: [], // 全选
  pageSelectArr: [] // 根据页码标记插入对象
}

const mutations = {
  // ... 其他 mutation ...
  SET_CHECK_ALL(state, allrow) {
    state.checkAll = allrow;
  },
  SET_CURRENT_PAGE(state, page) {
    state.currentPage = page;
  },
  SET_SEARCH_FORM(state, form) {
    state.searchForm = form;
  },
  SET_TABLE_DATA(state, tabledata) {
    state.tableData = tabledata;
  },
  SET_TOTAL_ITEMS(state, total) {
    state.totalItems = total;
  },
  SET_SELECTED_AllROWS(state, allrows) {
    state.selectedAllRows = allrows;
  },
  SET_SELECTED_ROWS(state, rows) {
    state.selectedRows = rows;
  },
  SET_PAGE_SELECTARR(state, arr) {
    state.pageSelectArr = arr;
  },
}

const mockData = [
  { id: 1, name: 'shen1', age: 29 },
  { id: 2, name: 'shen2', age: 30 },
  { id: 3, name: 'shen3', age: 31 },
  { id: 4, name: 'shen4', age: 35 },
  { id: 5, name: 'shen5', age: 45 },
  { id: 6, name: 'shen6', age: 47 },
  { id: 7, name: 'shen7', age: 55 },
  { id: 8, name: 'shen8', age: 55 },
  { id: 9, name: 'shen9', age: 5 },
  { id: 10, name: 'shen10', age: 999 },
  { id: 11, name: 'shen11', age: 7 },

  // ... 更多数据 ...
];

const getData = async (page, pageSize, searchKey) => {
  // 根据搜索关键字过滤数据
  let filteredData = mockData;
  if (searchKey) {
    filteredData = filteredData.filter(item => item.name.includes(searchKey));
  }

  // 计算总数据量
  const total = filteredData.length;

  // 计算并返回当前页的数据
  const start = (page - 1) * pageSize;
  const end = start + pageSize;
  const data = filteredData.slice(start, end);

  return {
    items: data,
    total: total
  };
}

const removeDuplicates = async(array1, array2) => {  
  return array1.filter(obj1 => {  
    return array2.indexOf(obj1) === -1;  
  });  
}

const actions = {
  // 对比两个数组，删除相同的对象
 
  // 跟新输入框
  updateForm({ commit, state }) {
    commit('SET_SEARCH_FORM', state.searchForm);
  },
  async fetchData({ commit, state }) {
    const { items, total } = await getData(state.currentPage, state.pageSize, state.searchForm.name);
    commit('SET_TABLE_DATA', items);
    commit('SET_TOTAL_ITEMS', total);
  },
  async updateAllows({ commit, state }) {
    if (state.selectedRows.checked) {
      const rowsArr = state.selectedAllRows
      rowsArr.push(state.selectedRows.row)
      commit('SET_SELECTED_AllROWS', state.selectedAllRows)
    } else {
      commit('SET_SELECTED_AllROWS', state.selectedAllRows.filter((item) => item.id !== state.selectedRows.row.id))
      state.tableData.map((item) => {
        if (item.id === state.selectedRows.row.id) {
          item.checked = false
        }
      })
      commit('SET_TABLE_DATA', state.tableData)
    }
  },
  async updateCheckAll({ commit, state }) {
    const {checkAll : {records,checked}, selectedAllRows, pageSelectArr, currentPage} = state
    // 全选
    if (checked) {
      const arr = _.difference(records, selectedAllRows)
      let isPush = false
      pageSelectArr.length !== 0 && pageSelectArr.map((item) => { 
        if (item.page === currentPage) {
          isPush = true
        }
      })
      const arr1 = pageSelectArr
      arr1.push({ page: currentPage, list: records })
      if (!isPush) commit('SET_PAGE_SELECTARR', arr1) 
      commit('SET_SELECTED_AllROWS', [...arr, ...selectedAllRows])
    } else {
      // 全取消
      let found = _.find(pageSelectArr, { page: currentPage });  
      const rarr = await removeDuplicates(selectedAllRows, found.list)
      console.log('rarr', rarr)
      commit('SET_SELECTED_AllROWS', rarr)

    }
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

组件代码

<template>
  <div id="marketingCampaign_module">
    <div class="main_module">
      <el-card>
        <el-form ref="searchForm" :model="searchForm" label-width="80px">
          <el-row>
            <el-col span="5">
              <el-form-item label="姓名">
                <el-input v-model="searchForm.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="resetHandle">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <vxe-table
        ref="testref"
        :data="tableData"
        @checkbox-change="handleCheckboxChange"
        @checkbox-all="selectAllEvent"
      >
        <vxe-column type="checkbox" width="60"></vxe-column>
        <vxe-column field="name" title="Name"></vxe-column>
        <vxe-column field="age" title="Age"></vxe-column>
      </vxe-table>
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="totalItems"
        @current-change="handlePageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
// import Pagination from "@/components/Pagination";
// import createMianActivityDialog from "./components/createMianActivityDialog.vue";
// import Api from "@/api/enterpriseCenter/enterprise";
import { formatDateTime } from "../../utils/index";
import { mapState, mapMutations, mapActions } from "vuex";
// import commonData from "./mixins/data";
export default {
  name: "TestTable",
  // components: {
  //   Pagination,
  // },
  data() {
    return {
      form: { ...this.searchForm },
    };
  },
  computed: {
    ...mapState("test", [
      "tableData",
      "selectedRows",
      "currentPage",
      "pageSize",
      "totalItems",
      "searchForm",
      "selectedAllRows",
      "checkAll"
    ]),
  },
  async created() {
    this.fetchData1();
  },
  methods: {
    ...mapMutations("test", [
      "SET_TABLE_DATA",
      "SET_SELECTED_ROWS",
      "SET_CURRENT_PAGE",
      "SET_SEARCH_FORM",
      "SET_CHECK_ALL"
    ]),
    ...mapActions("test", ["fetchData", "updateAllows", "updateForm","updateCheckAll"]),
    handleCheckboxChange(val) {
      this.SET_SELECTED_ROWS(val);
      this.updateAllows();
    },
    async selectAllEvent(val) {
    await this.SET_CHECK_ALL(val)
    await  this.updateCheckAll()
    },
    async handlePageChange(page) {
      await this.SET_CURRENT_PAGE(page);
      await this.fetchData();
      let idMap = new Map();
      this.selectedAllRows.forEach((row) => {
        idMap.set(row.id, true);
      });
      this.tableData.forEach((item) => {
        item.checked = false
        if (idMap.has(item.id)) {
          item.checked = true;
        }
      });
      this.$refs["testref"].clearCheckboxRow();
      this.tableData.map((item, index) => {
        if (item.checked) {
          this.$refs["testref"].setCheckboxRow(this.tableData[index], true);
        }
      });
    },
    async handleSearch() {
      await this.SET_SEARCH_FORM(this.searchForm);
      await this.fetchData();
    },
    async resetHandle() {
      await this.SET_SEARCH_FORM({
        name: "",
      });
      await this.fetchData();
    },
    async fetchData1() {
      await this.fetchData();
    },
  },
};
</script>
<style scoped>
#marketingCampaign_module {
}
</style>