el-table分页多选及回显

在Vue.js的Element UI库中的`el-table`组件中，分页、多选以及数据回显通常是结合在一起处理的高级功能。这里是一个简要说明：

1. **分页**：通过`el-pagination`组件配合`el-table`，可以实现数据的分页显示，用户可以在每一页查看部分数据，通常通过设置`page-size`属性控制每页显示多少条记录。

2. **多选**：在`el-table`的列头添加`type="selection"`属性，可以让每一行成为可选择状态，用户可以选择多行数据。这会触发`@select`或`@row-click`事件，用于获取所选数据。

3. **数据回显**：如果需要在页面加载时显示之前保存的状态，比如多选状态，可以先从服务器或本地存储（如Vuex或localStorage）获取已选择的数据，然后在`row-key`指定的字段上绑定这个状态，这样表格会根据回显的数据更新其展示。

例如，你可以这样做：

<template>
  <el-pagination :total="total" @current-change="handleCurrentChange"></el-pagination>
  <el-table
    :data="tableData"
    row-key="id"
    border
    v-model="selectedRows"
    @select="handleSelectionChange"
  >
    <!-- ...表头... -->
    <el-table-column type="selection" label="操作">
      <!-- 处理复选框操作... -->
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      tableData: [],
      selectedRows: [], // 用于保存选中的行ID
    };
  },
  methods: {
    handleCurrentChange(page) {
      this.tableData = this.tableData.slice((page - 1) * this.perPage, page * this.perPage);
    },
    handleSelectionChange(rows) {
      this.selectedRows = rows.map(row => row.id); // 更新当前选中的行ID
    },
    // 其他方法...
  },
  computed: {
    perPage: {
      get: () => this.$store.state.pageSize, // 如果是从Vuex获取分页大小
      set(value) { this.$store.commit('setPageSize', value); }
    },
  },
  // 获取数据并初始化回显部分
  async created() {
    const initialSelectedIds = await this.fetchInitialSelection(); // 假设这是一个获取初始选择的函数
    if (initialSelectedIds.length > 0) {
      this.selectedRows = initialSelectedIds;
    }
  },
};
</script>