el-table分页记录数据

简介: el-table分页记录数据

一、需求背景

当多选表格操作比较频繁时候,一页数据的多选已经不能满足使用,那么我们需要记录每一页的数据,然后一起提交使用。

二、使用组件的情况

2.1、设置row-key

:row-key="getRowKeys"

<el-editable
      ref="multipleTable"
      class="el-table"
      :data="tableData"
      height="400"
      :row-key="getRowKeys"
      v-loading="tableLoading"
      :columns="userManagement"
      @selection-change="handleSelectionChange"
    >

2.2、row-key的方法

getRowKeys(row){
   return row.id
},

2.3、const.js配置

{
    fixed: 'left',
    type: 'selection',
    'reserve-selection': true // 分页保留数据
  },

三、不使用组件,直接el-table的方式

3.1,设置row-key

<el-table
      ref="multipleTable"
      class="el-table"
      :data="tableData"
      height="400"
      :row-key="getRowKeys"
      v-loading="tableLoading"
      @selection-change="handleSelectionChange"
    >

3.2、row-key的方法

getRowKeys(row){
   return row.id
},

3.3、reserve-selection配置

<el-table-column
        type="selection"
        reserve-selection
        width="55"/>

四、效果

第一页选择3条、第二页选择3条,打印时共计6条数据

数据存储在multipleSelection字段里边,需要使用时候直接使用这个字段即可。

如需要展示可以直接把这个字段数据展示在列表里边即可。

五、参考资料

六、欢迎交流指正。

 

相关文章
|
Oracle Java 编译器
Java 中如何生成字节码?
Java 中如何生成字节码?
|
JavaScript
vue 实现表格循环滚动 vue-seamless-scroll插件的安装与使用
vue 实现表格循环滚动 vue-seamless-scroll插件的安装与使用
1140 0
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
9949 1
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
安全 JavaScript Java
SpringBoot解决跨域最佳实践
本文介绍了跨域问题的起因及最佳实践,重点讲解了SpringBoot中如何利用`CorsFilter`解决跨域问题。首先解释了由于浏览器的同源策略限制导致的跨域现象,然后提出了在服务端入口处解决跨域问题的建议,最后详细展示了三种SpringBoot中配置跨域的方法:使用默认配置、自定义配置规则以及通过配置文件管理跨域设置,以适应不同的应用场景。
598 5
|
缓存 JavaScript 前端开发
vue + element Table的数据多选,多页选择数据回显,分页记录保存选中的数据。
vue + element Table的数据多选,多页选择数据回显,分页记录保存选中的数据。
560 0
Vue3日期选择器(DatePicker)
该组件基于 **@vuepic/vue-datepicker@9.0.1** 进行二次封装,简化了日常使用。除范围和年选择器外,其他日期选择均返回格式化的字符串。提供了多种自定义设置,如日期选择器宽度、模式、格式等,并支持时间选择和“今天”按钮展示。详细配置及更多功能请参考[官方文档](https://vue3datepicker.com/installation/)。组件已集成所有原生属性,并支持主题颜色自定义。 示例代码展示了如何创建和使用日期选择器组件,包括基本使用、禁用日期、日期时间选择器、范围选择器等多种场景。更多功能和样式可通过官方文档了解。
2616 2
Vue3日期选择器(DatePicker)
|
前端开发 API Swift
探索iOS应用开发的新趋势:SwiftUI和Combine框架
【8月更文挑战第16天】本文深入探讨了iOS平台上的两个最新技术:SwiftUI和Combine。SwiftUI旨在简化用户界面的构建,而Combine则优化了事件处理机制。我们将分析这两个框架如何共同推动iOS开发的未来,以及它们给开发者带来的便利和挑战。
327 6
Element UI 多选表格【翻页多选】简易版(不支持翻页多选数据反显)
Element UI 多选表格【翻页多选】简易版(不支持翻页多选数据反显)
340 0
Element UI 多选表格【翻页多选】简易版(不支持翻页多选数据反显)