百搜论坛欢迎您的加入!
adimg adimg
 
昨日:篇  今日:篇   总帖:篇   会员:
博主最大Lv63   
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

 0  已被阅读了1201次  楼主 2022-06-20 11:43:57
回复列表

回复:el-table 分页全选功能讲解

联系站长 友链申请桂ICP备19000949号-1     桂ICP备19000949号-1
您的IP:18.208.172.3,2024-03-29 09:00:38,Processed in 0.11014 second(s).
免责声明: 本网不承担任何由内容提供商提供的信息所引起的争议和法律责任。
Powered by HadSky 7.12.9
已有0次打赏
(0) 分享
分享
取消
免责声明
1、本站资源,均来自网络,版权归原作者,所有资源和文章仅限用于学习和研究目的 。
2、不得用于商业或非法用途,否则,一切责任由该用户承担 !
如果觉得本文还不错请点个赞或者打赏点轻币哦~
拒绝伸手党,拿走请回复,尊重楼主,尊重你我他~

侵权删除请致信 E-Mail:207882320@qq.com