el-table 分页全选功能讲解

原创

CRMEB商城源码

发布于 2022-06-20 06:58:34

2.3K00

代码可运行

文章被收录于专栏：crmebcrmeb

运行总次数：0

代码可运行

今天和大家一起学习一个 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>