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

2023-10-20 02:22:03

当前复选框分页数据在记忆选中方面存在一些问题，这可能会影响表格的正常使用和数据操作。下面，我们就来探讨一下这些问题并提出一些解决方案。

问题阐述

vxe-table 是一个基于 Vue.js 的高级表格组件，它具有丰富的功能和可定制性，包括复选框选择、分页、数据记忆等。然而，在使用复选框分页时，可能会遇到数据记忆失效的问题。具体表现为：当用户在某一页勾选了某些行，然后切换到另一页，再返回到原先的页面时，发现之前勾选的行不再处于选中状态。

问题分析

为了解决这个问题，我们需要先了解一下 vxe-table 中数据记忆的实现原理。vxe-table 通过 watch 监听表格的选中数据，并在数据发生变化时触发回调函数，将当前的选中数据存储起来。当表格重新渲染时，vxe-table 会根据存储的选中数据，重新设置表格行的选中状态。

解决思路

问题的原因在于，当表格切换到另一页时，原先存储的选中数据不再适用。因此，我们需要优化存储选中数据的方式，使得它能够适应分页的情况。

我们可以使用 computed 计算属性来存储选中数据。computed 属性是一个基于数据的计算属性，它会在依赖的数据发生变化时自动更新。我们可以将表格的当前页数据作为依赖数据，这样当表格切换到另一页时，computed 属性的值就会自动更新，从而保证存储的选中数据始终与当前页的数据保持一致。

解决方案

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    // ... 其他 prop
  },
  data() {
    return {
      // ... 其他 data
      selectedRows: [], // 存储选中数据
    };
  },
  computed: {
    // 计算选中数据
    selectedData() {
      // 获取当前页数据
      const currentPageData = this.$refs.table.currentPageData;

      // 过滤出选中行的数据
      const selectedData = currentPageData.filter(row => this.selectedRows.includes(row[this.keyField]));

      return selectedData;
    },
  },
  watch: {
    // 监听选中数据变化
    selectedData: {
      handler(newVal, oldVal) {
        // 更新存储的选中数据
        this.selectedRows = newVal.map(row => row[this.keyField]);
      },
      deep: true,
    },
  },
  methods: {
    // 重置选中数据
    resetSelection() {
      this.selectedRows = [];
    },
  },
});
</script>