el-table 翻页后保留所勾选项 - 轻松保留选中项，提升表格操作效率

2023-11-23 12:13:04

el-table 翻页后保留所勾选项

前言

在前端开发中，el-table 是一款广泛使用的表格组件。它提供了丰富的功能，帮助开发人员快速构建出美观且功能强大的表格。其中，保留勾选框选中状态是一个常见的需求。但是，在默认情况下，el-table 并没有提供这样的功能。本文将分享一个简单的解决方案，帮助您轻松实现这一需求。

思路

要实现翻页后仍能保留勾选项，关键在于如何将选中项的状态存储起来。我们可以使用 Vue.js 的 data 属性来存储这些状态。具体步骤如下：

在 Vue.js 组件中，声明一个 selectedRows 数组，用于存储选中的行。
在 el-table 的 row-selection 属性中，设置 selected-row-keys 属性，并将 selectedRows 数组作为其值。
在 el-table 的 on-selection-change 事件中，将当前选中的行添加到 selectedRows 数组中。
在 el-table 的 on-pagination-update 事件中，将 selectedRows 数组中的行标记为选中状态。

示例代码

<template>
  <el-table
    :data="tableData"
    :row-selection="{
      type: 'checkbox',
      selected-row-keys: selectedRows
    }"
    @selection-change="handleSelectionChange"
    @pagination-update="handlePaginationUpdate"
  >
    <el-table-column type="selection" width="55"></el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'John Doe', age: 30 },
        { id: 2, name: 'Jane Smith', age: 25 },
        { id: 3, name: 'Michael Jones', age: 35 },
        // ...
      ],
      selectedRows: []
    };
  },
  methods: {
    handleSelectionChange(rows) {
      this.selectedRows = rows;
    },
    handlePaginationUpdate(currentPage, pageSize) {
      this.selectedRows.forEach((row) => {
        this.$refs.table.toggleRowSelection(row, true);
      });
    }
  }
};
</script>