vue如何基于el-table实现多页多选及翻页回显过程

实现多页多选及翻页回显的关键在于要在不同页之间共享数据。Vue.js提供了一些辅助方法来进行数据处理和页面渲染。我们可以使用Vue.js的计算属性和方法来实现该功能。

步骤一：设置选中项和分页

首先，我们需要在Vue实例中通过数据来记录选中的项和当前页数，具体代码如下：

<template>
  <el-table
    :data="tableData"
    v-loading="loading"
    :row-key="row => row.id"
    :columns="columns"
    @selection-change="handleSelectionChange">
  </el-table>
  <el-pagination v-model="currentPage" :page-size="pageSize" :total="total"></el-pagination>
</template>

<script>
export default {
  data () {
    return {
      tableData: [], // data for el-table
      columns: [], // columns for el-table
      loading: false,
      currentPage: 1, // 当前页数
      pageSize: 20, // 每页数量
      total: 0, // 总数
      selections: [] // 当前页已选项
    }
  },

  ...

在el-table中，我们使用@selection-change事件来监听选中项的变化，在每次变化时记录下当前页已选项。当页面切换时，我们需要根据当前页数来切换选中项。为了方便起见，我们可以通过计算属性来自动计算当前页的数据和已选项：

computed: {
  // 当前页的数据
  currentPageData () {
    const start = (this.currentPage - 1) * this.pageSize
    const end = start + this.pageSize
    return this.tableData.slice(start, end)
  },
  // 当前页选中项
  currentSelections () {
    return this.selections.filter(item => this.currentPageData.some(row => row.id === item.id))
  }
},

步骤二：渲染选中项

在el-table中，默认情况下，选中的行将突出显示，但是，由于我们需要支持多页选中项，因此我们需要在每行的第一列添加一个复选框来显示已选状态，并实现多选功能。为此，我们需要通过slot-scope来自定义插槽，并添加一个<el-checkbox>来实现选中状态。具体代码如下：

<el-table-column width="55" type="selection">
  <template slot-scope="scope">
    <el-checkbox v-model="scope.row._checked" @change="changeSelection"></el-checkbox>
  </template>
</el-table-column>

这里的v-model绑定了每行的选中状态，@change事件监听选中状态变化，我们可以在该事件中实时更新选中项的状态。

步骤三：翻页回显

最后，我们需要处理翻页回显的功能。当用户选择项跨越多页时，我们需要在切换页面时保持选中状态。为此，我们可以在currentPage变化时更新当前页已选项。具体代码如下：

watch: {
  currentPage (newVal) {
    // 选中项回显
    this.selections = [...this.selections.filter(item => this.currentPageData.some(row => row.id === item.id)), ...this.currentSelections]
  }
},

这里的watch监听了currentPage的变化。当变化时，我们首先过滤出当前页已选项中已经被选中的选项，然后将它们合并到所有选中项中，以实现选中状态的保持。

示例说明

示例一：基于el-table的多页多选及翻页回显

基于上述步骤，我们可以实现一个基于el-table的多页多选及翻页回显示例。该示例支持多页选中项，翻页回显及批量删除功能。你可以在以下链接中查看完整代码：

https://github.com/Hanqing1996/vue-el-table-pagination-demo

示例二：基于el-table的远程数据分页及多选

在实际项目中，我们通常需要从远程服务器获取数据并进行分页处理。基于上述步骤，我们可以实现一个远程数据分页及多选的示例。该示例支持每页选择数量及分页展示功能，并且通过发起AJAX请求来实现数据的获取和分页。你可以在以下链接中查看完整代码：

https://github.com/Hanqing1996/vue-el-table-axios-pagination-demo