Vue基于el-table怎么实现多页多选及翻页回显 - 开发技术

来源：佚名编辑：佚名

2024-04-19 02:00:08

问：在Vue中使用el-table时，如何实现多页多选功能，并且在翻页时能够保持选中状态？

答：在Vue中，使用Element UI的el-table组件实现多页多选及翻页回显功能，可以通过维护一个全局的选中项数组来实现，当用户选择某一页的数据项时，将这些数据项的标识（如ID）添加到全局数组中；当用户翻页时，根据这个全局数组来设置对应行的选中状态。

下面是一个简单的实现步骤和示例代码：

步骤一：准备数据

你需要一个包含所有数据的数组，以及一个用于存储选中项ID的数组。

data() {
  return {
    tableData: [], // 表格数据
    selectedIds: [], // 选中项的ID数组
    currentPage: 1, // 当前页码
    pageSize: 10, // 每页显示数量
  };
},

步骤二：处理选择事件

在el-table组件上添加@selection-change事件监听器，当用户选择或取消选择某一行时，更新selectedIds数组。

<el-table
  :data="tableData.slice((currentPage-1)*pageSize, currentPage*pageSize)"
  @selection-change="handleSelectionChange"
  ref="multipleTable"
>
  <!-- 表格列定义 -->
</el-table>

在methods中定义handleSelectionChange方法：

methods: {
  handleSelectionChange(val) {
    this.selectedIds = val.map(item => item.id); // 假设每项数据都有一个唯一的id属性
  },
},

步骤三：设置行的选中状态

在el-table的每一行上，使用row-class-name属性来根据selectedIds数组设置行的样式。

<el-table
  :data="tableData.slice((currentPage-1)*pageSize, currentPage*pageSize)"
  @selection-change="handleSelectionChange"
  ref="multipleTable"
  :row-class-name="tableRowClassName"
>
  <!-- 表格列定义 -->
</el-table>

在methods中定义tableRowClassName方法：

methods: {
  tableRowClassName({ row, rowIndex }) {
    if (this.selectedIds.includes(row.id)) {
      return 'selected-row'; // 选中状态的样式类名
    }
    return '';
  },
},

在CSS中定义selected-row样式：

.selected-row {
  background-color: #f5f7fa; /* 或者其他你想要的选中状态背景色 */
}

步骤四：处理翻页事件

当用户翻页时，你需要根据selectedIds数组来设置新页面的行的选中状态，这可以通过在翻页逻辑中调用clearSelection和setRowKey方法来实现。

methods: {
  handleCurrentChange(val) {
    this.currentPage = val;
    this.$refs.multipleTable.clearSelection(); // 清除之前页面的选中状态
    this.$nextTick(() => {
      this.selectedIds.forEach(id => {
        const row = this.tableData.find(item => item.id === id);
        if (row) {
          this.$refs.multipleTable.setRowKey(row.id, true); // 设置新页面的行的选中状态
        }
      });
    });
  },
},

在模板中添加翻页控件，并绑定handleCurrentChange方法：

<el-pagination
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-size="pageSize"
  layout="prev, pager, next"
  :total="tableData.length">
</el-pagination>

这样，你就实现了在Vue中使用el-table的多页多选及翻页回显功能，当用户在不同页面选择数据时，选中的状态会在翻页时得到保持。

本网站发布或转载的文章均来自网络，其原创性以及文中表达的观点和判断不代表本网站。

本文地址：https://www.henghost.com/news/article/85113/