vue如何基于el-table实现多页多选及翻页回显过程

 更新时间:2022年12月12日 15:37:05   作者:努力的小球  
在最近的一个项目中我需要实现表格的翻页,并且还要实现全选、多选功能,下面这篇文章主要给大家介绍了关于vue如何基于el-table实现多页多选及翻页回显过程的相关资料,需要的朋友可以参考下

近半年时间在接触vue写pc页面,文中内容即在实际的开发过程中遇到的实际问题。

1、问题交代:

在pc版的列表页面中,假设当前在列表的第一页,想要在当前页面选择几行数据,跳转到其他页面选择几行数据,选择后的数据页面展示为已勾选状态,经过跳转页面之后,数据选择状态依然存在,且可以将已选择的数据的id传到后端;即标题所述的实现多页多选、翻页回显问题 。示例图片如下:

下面第一个图为第一页选择的数据信息:

 下图为跳转到第二页选择数据的截图:

想达到的最终效果是这两个页面不管怎么跳转,都能显示跳转之前的选中状态。

2、实现的步骤

2.1  设置table标签

下面加粗字体是实现多页多选 翻页回显的必要设置,下面依次说明一下

<el-table size="small" :data="listData" ref="multipleTable" row-key="getRowKeys" @select="handleCheckBox" @select-all="handleSelectAll" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">

      <el-table-column align="center" type="selection" width="60"></el-table-column>

el-table 标签中设置信息解读:

  • ref="multipleTable":ref是设置对这个el-table的引用,设置后可以在其他地方通过this.$refs.multipleTable 进行调用使用数据
  • row-key="getRowKeys":指定数据的 Key,用来优化 Table 的渲染;在使用 reserve-selection 功能与显示树形数据时,该属性是必填的。类型为 String 时,支持多层访问:user.info.id,但不支持 user.info[0].id,此种情况请使用 Function
  • @select="handleCheckBox":指定用户手动勾选数据行的 Checkbox 时触发的事件,这个名称要和下面method中方法名对应上
  • @select-all="handleSelectAll":指定用户手动勾选全选 Checkbox 时触发的事件,这个名称要和下面method中方法名对应上

el-table-column标签中设置的信息解读:

  • type="selection":将el-table的第一列设置成显示多选框

2.2 定义记录选择的数组

在export default 的data()中进行定义数组,只展示了需要添加的代码

export default {
  data() {
    return {
               multipleSelection: [],

2.3 定义手动单选 和手动全选的函数/方法

在export defalt的method中编写下面函数方法: 

 //该方法是单选时的方法
 handleCheckBox(rows, row) {      
   if (this.multipleSelection.find((item) => item == row.case_id)) {
      //下面这个filter方法就是删除的方法
      this.multipleSelection = this.multipleSelection.filter(
        (item) => item != row.case_id
      );
    } else {
      this.multipleSelection.push(row.case_id);
    },
 
 //该方法是当页全选的方法
 handleSelectAll(rows) {
    if (rows.length) {
      rows.forEach((row) => {
        if (!this.multipleSelection.find((item) => item == row.case_id)) {
          this.multipleSelection.push(row.case_id);
        }
      });
    } else {
      this.listData.forEach((row) => {
        this.multipleSelection = this.multipleSelection.filter(
          (item) => item != row.case_id
        );
      });
    }
  },
 
//下面的方法是进行设置行标识key的方法
getRowKeys(row) {
    return row.case_id
}

2.4 写控制回显部分代码

因为在实现分页的时候使用了分页组件,即每次翻页都会调用后端的list方法去查询这个页面的数据信息,所以回显的逻辑要方法每次调用后端数据的逻辑中,代码如下:

getdata(parameter) {
      this.loading = true
      /***
       * 调用后端接口
       */
      TestCaseList(parameter)
        .then(res => {
          this.loading = false
          if (res.success == false) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            this.listData = res.data
            // 分页赋值
            this.pageparm.currentPage = this.formInline.page
            this.pageparm.pageSize = this.formInline.limit
            this.pageparm.total = res.count
            //这里是回显的功能代码 当切换页面的时候 会重新调用list方法,在这个位置进行判断这个数据是否回显
            this.$nextTick(()=>{
            this.listData.forEach((item,index)=>{
              if(this.multipleSelection.findIndex(v=>v == item.case_id) >= 0){
                this.$refs.multipleTable.toggleRowSelection(
                    this.$refs.multipleTable.data[index],
                    true
                );
              }
            })
            console.log('这里是每次查询list接口之后的操作,看看是否回显');
            console.log("multipleSelection=", this.multipleSelection);
          })
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('菜单加载失败,请稍后再试!')
        })
    },

 具体功能实现讲解:

this.$nextTick(()=>{
            this.listData.forEach((item,index)=>{
              if(this.multipleSelection.findIndex(v=>v == item.case_id) >= 0){
                this.$refs.multipleTable.toggleRowSelection(
                    this.$refs.multipleTable.data[index],
                    true
                );
              }
            })

实现功能就是每次调用完后端的list接口,判断查出来的case_id是否有在multipleSelection数组中的,在数组中意味着要显示成已选中的状态,通过ref调用table数据 调用toggleRowSelection()方法实现,即上面加粗部分代码;

以上几个步骤将如何实现的过程已完全描述

总结

到此这篇关于vue如何基于el-table实现多页多选及翻页回显过程的文章就介绍到这了,更多相关vue el-table多页多选及翻页回显内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue开发页面自适应屏幕尺寸的实例代码

    vue开发页面自适应屏幕尺寸的实例代码

    使用vue开发的页面都是通过px设置它的尺寸,如果换了一个不同尺寸的屏幕就会出现页面排版错乱,显示不完整等情况,下面通过插件将px装换为rem单位适应不同尺寸的屏幕,需要的朋友可以参考下
    2022-12-12
  • 基于vue实现8小时带刻度的时间轴根据当前时间实时定位功能

    基于vue实现8小时带刻度的时间轴根据当前时间实时定位功能

    这篇文章主要介绍了基于vue实现8小时带刻度的时间轴根据当前时间实时定位功能,开始时间、结束时间可配置,根据当前时间初始化位置,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • Vue开发实践指南之应用入口

    Vue开发实践指南之应用入口

    这篇文章主要给大家介绍了关于Vue开发实践指南之应用入口的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-01-01
  • vue-cli3 设置端口号(81)无效的解决

    vue-cli3 设置端口号(81)无效的解决

    这篇文章主要介绍了vue-cli3 设置端口号(81)无效的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-02-02
  • 关于VUE的编译作用域及slot作用域插槽问题

    关于VUE的编译作用域及slot作用域插槽问题

    这篇文章主要介绍了VUE 的编译作用域及slot作用域插槽问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-07-07
  • 在Linux服务器上部署vue项目

    在Linux服务器上部署vue项目

    这篇文章介绍了在Linux服务器上部署vue项目的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-11-11
  • Vue实现天气预报小应用

    Vue实现天气预报小应用

    这篇文章主要为大家详细介绍了Vue实现天气预报小应用,查询一些城市的天气情况,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • Vue项目分环境打包的实现步骤

    Vue项目分环境打包的实现步骤

    这篇文章主要介绍了Vue项目如何分环境打包,实现方法大概分为六步骤,需要的朋友可以参考下
    2018-04-04
  • Vuex中State的使用方法

    Vuex中State的使用方法

    这篇文章主要介绍了Vuex中State的使用方法,Vuex 使用单一状态树,用一个对象就包含了全部的应用层级状态,这也意味着,每个应用将仅仅包含一个 store 实例,需要的朋友可以参考下
    2023-11-11
  • vue-以文件流-blob-的形式-下载-导出文件操作

    vue-以文件流-blob-的形式-下载-导出文件操作

    这篇文章主要介绍了vue-以文件流-blob-的形式-下载-导出文件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08

最新评论