关于table:eltable-分页全选功能讲解

明天和大家一起学习一个 el-table 分页全选的性能

咱们在用 el-table 组件的时候，必定会用到分页性能，不论是长列表下拉分页还是用 element-UI 的 el-pagination 分页。

然而咱们在具备抉择性能的 el-table 的时候，会遇到一个问题，在点击进行分页之后，之前抉择的数据没了，这个问题真的是困扰我好久。

在前面的我又开始面向百度开发，找到一个没有 bug 的办法这个办法是：

在 el-table 中，通过 @selection-change=“handleRowSelection” 和 :row-key=“getRowKeys”，

在第一行，也就是多选框的那一列上，加上 :reserve-selection="true", 间接上代码，仅供大家参考。

<template>  <div>    <el-table      ref="table"      :data="tableData"      size="small"      height="100%"row-key=“id”      @selection-change="handleSelectChange"      @select="handleSelect"    >      <el-table-column width="50" type="selection" />      <el-table-column type="index" label="序号" width="50">        <template scope="scope">          <span>{{            (pageInfo.pageNo - 1) * pageInfo.pageSize + scope.$index + 1          }}</span>        </template>      </el-table-column>      <el-table-column label="名称1" />      <el-table-column label="名称2" />      <el-table-column label="名称3" />      <el-table-column label="名称4" />      <el-table-column label="名称5" />    </el-table>  </div></template><script>export default {  data() {    return {      tableData: [],      selectedObj: {},      selectedData: []    }  },  methods: {    getList() {      // 查数据的中央，解决分页选中状态      this.handleRowSelection(this.tableData)    },    handleSelectChange(selection) {      // 全选勾销，删除当前页所有数据      if (selection.length === 0) {        this.tableData.forEach(item => {          delete this.selectedObj[item.id]        })      }      // 勾选数据 增加      selection.forEach(item => {        this.selectedObj[item.id] = item      })      // 获取所有分页勾选的数据      this.selectedData = []      for (const key in this.selectedObj) {        this.selectedData.push(this.selectedObj[key])      }    },    handleSelect(selection, row) {      // 勾销单个勾选时，删除对应属性      if (!selection.some(item => item.id === row.id)) {        delete this.selectedObj[row.id]      }    },    // 解决以后列表选中状态    handleRowSelection(data) {      data.forEach(item => {        if (this.selectedObj[item.id]) {          this.$nextTick(() => {            this.$refs.table.toggleRowSelection(item)          })        }      })    }  }}</script>

源码附件曾经打包好上传到百度云了，大家自行下载即可～

链接: https://pan.baidu.com/s/14G-b...
提取码: yu27
百度云链接不稳固，随时可能会生效，大家放松保留哈。

如果百度云链接生效了的话，请留言通知我，我看到后会及时更新～

开源地址
码云地址：
http://github.crmeb.net/u/defu

Github 地址：
http://github.crmeb.net/u/defu