返回

行勾选框单选 + 跨Tab页持久保存状态（vxe-table）

前端

vxe-table 中实现复选框单选和跨页勾选状态持久化

vxe-table 简介

vxe-table 是一个功能强大的前端表格组件库，提供了一系列丰富的功能和定制选项。其中，复选框是 vxe-table 中一项重要的功能，它允许用户对表格中的数据进行选择和操作。

配置复选框单选模式

默认情况下，vxe-table 的复选框支持多选。但是，在某些场景中，我们可能需要实现复选框单选功能，即当选中一行时，其他行的选中状态会被取消。

要实现单选模式，我们需要在 vxe-table 的配置项中添加 checkbox-config 属性，并将其值设置为 {trigger: 'row'}。这样，当我们点击行的复选框时，当前行的勾选状态将被切换为选中，而其他行的勾选状态则会被取消。

跨 Tab 页持久化勾选状态

在一些复杂的场景中，我们可能希望在用户切换 Tab 页后，复选框的勾选状态依然能够被保存。vxe-table 目前不支持此功能，但我们可以通过外部手段来实现它。

Tab 页切换后恢复勾选状态

当用户在 Tab 页之间切换时，我们可以监听 Tab 页组件的 tab-click 事件，并在此事件中对 vxe-table 的勾选状态进行处理。

  1. 获取当前激活的 Tab 页索引： 通过 tab-click 事件对象中的 index 属性，我们可以获取当前激活的 Tab 页的索引。
  2. 根据索引获取对应的 vxe-table 实例： 根据索引，我们可以从组件实例中获取对应的 vxe-table 实例。
  3. 获取已勾选的数据： 使用 vxe-table 的 getCheckboxRecords() 方法，我们可以获取当前选中的数据。
  4. 存储已勾选的数据到本地存储： 将已勾选的数据存储到本地存储中，以便在切换回来时恢复。

切换回 Tab 页后恢复勾选状态

当用户切换回 Tab 页时，我们可以再次监听 tab-click 事件，并在事件中从本地存储中获取已勾选的数据。

  1. 从本地存储中获取已勾选的数据： 从本地存储中获取已勾选的数据。
  2. 设置 vxe-table 的 selected-row 属性： 将获取到的已勾选数据设置到 vxe-table 的 selected-row 属性中，即可恢复复选框的勾选状态。

通过上述步骤，我们可以实现跨 Tab 页持久化 vxe-table 复选框勾选状态的功能。

代码示例

HTML：

<template>
  <el-tabs @tab-click="handleTabClick">
    <el-tab-pane label="Tab 1">
      <vxe-table ref="table1" ...>
        ...
      </vxe-table>
    </el-tab-pane>
    <el-tab-pane label="Tab 2">
      <vxe-table ref="table2" ...>
        ...
      </vxe-table>
    </el-tab-pane>
  </el-tabs>
</template>

JavaScript：

export default {
  components: {
    ElTabs,
    VxeTable
  },
  methods: {
    handleTabClick(tab) {
      // 获取当前激活的Tab页的索引
      const activeIndex = tab.index

      // 根据索引获取对应的vxe-table实例
      const table = this.$refs[`table${activeIndex + 1}`]

      // 获取已勾选的数据
      const selectedRows = table.getCheckboxRecords()

      // 存储已勾选的数据到本地存储
      localStorage.setItem('selectedRows', JSON.stringify(selectedRows))
    }
  }
}

常见问题解答

  1. 如何启用复选框单选模式？

    在 vxe-table 的配置项中添加 checkbox-config 属性，并将其值设置为 {trigger: 'row'}。

  2. 如何跨 Tab 页持久化复选框勾选状态？

    在 Tab 页切换时，将已勾选的数据存储到本地存储中，并在切换回来时从本地存储中获取已勾选的数据，并设置到 vxe-table 的 selected-row 属性中。

  3. 如何获取已勾选的数据？

    使用 vxe-table 的 getCheckboxRecords() 方法可以获取已勾选的数据。

  4. 如何在本地存储中存储已勾选的数据？

    使用 JSON.stringify() 方法将已勾选的数据转换为 JSON 字符串，并存储到本地存储中。

  5. 如何在切换回来时从本地存储中获取已勾选的数据？

    使用 JSON.parse() 方法将本地存储中存储的 JSON 字符串转换为对象，即可获取已勾选的数据。