el-table的select多选分页回显

作者:admin 发布日期:2023年8月10日 14:13 浏览量:93

el-table 中使用多选(selection)并实现分页回显,需要特别处理选中项的状态以及分页的数据更新。以下是一个示例,展示了如何实现这个功能:

<template>
  <div>
    <el-table
      :data="currentPageData"
      :row-key="row => row.id"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
    </el-table>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30]"
      :page-size="pageSize"
      :total="data.length"
      layout="sizes, prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { id: 1, name: 'John', age: 25 },
        { id: 2, name: 'Jane', age: 30 },
        { id: 3, name: 'Bob', age: 28 },
        // ... more data
      ],
      currentPage: 1,
      pageSize: 10,
      selectedRows: [] // 用于存储选中的行数据
    };
  },
  computed: {
    currentPageData() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.data.slice(startIndex, endIndex);
    }
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },
    handlePageChange(newPage) {
      this.currentPage = newPage;
      // 更新选中的行数据,根据 ID 来匹配
      this.selectedRows = this.selectedRows.map(row => this.data.find(item => item.id === row.id));
    }
  }
};
</script>

在这个示例中,我们添加了一个多选列(type="selection")到 el-table-column,并监听 selection-change 事件来更新选中的行数据。

selectedRows 数组用于存储选中的行数据。在 handleSelectionChange 方法中,我们监听多选的变化,并将选中的行数据存储到 selectedRows 中。在 handlePageChange 方法中,我们更新了分页后的选中行数据,确保选中的行在分页切换后也能正确显示。

这样,你就可以在 el-table 中实现多选的分页回显功能。注意,具体的实现可能会因为你的数据结构和业务需求而有所不同,你可以根据需要进行调整。