关于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