el-table分页全选功能讲解

今天和大家一起学习一个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-bpVthImHD4eosZUNSFA?pwd=yu27提取码: yu27

百度云链接不稳定，随时可能会失效，大家抓紧保存哈。

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

开源地址

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

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