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字段里边,需要使用时候直接使用这个字段即可。

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

五、参考资料

六、欢迎交流指正。

 

相关文章
|
JavaScript 前端开发
VUE组件:如何在Vue中实现组件的动态引入?
VUE组件:如何在Vue中实现组件的动态引入?
2526 0
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
10371 46
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
11月前
|
前端开发 API
el-table实现动态数据的实时排序,一篇文章讲清楚elementui的表格排序功能,利用@sort-change实现动态数据排序,el-table排序方法,el-table可变数据的动态排序
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Element UI 多选表格【翻页多选】简易版(不支持翻页多选数据反显)
Element UI 多选表格【翻页多选】简易版(不支持翻页多选数据反显)
391 0
Element UI 多选表格【翻页多选】简易版(不支持翻页多选数据反显)
|
缓存 JavaScript 前端开发
vue + element Table的数据多选,多页选择数据回显,分页记录保存选中的数据。
vue + element Table的数据多选,多页选择数据回显,分页记录保存选中的数据。
747 0
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
|
前端开发 API Swift
探索iOS应用开发的新趋势:SwiftUI和Combine框架
【8月更文挑战第16天】本文深入探讨了iOS平台上的两个最新技术:SwiftUI和Combine。SwiftUI旨在简化用户界面的构建,而Combine则优化了事件处理机制。我们将分析这两个框架如何共同推动iOS开发的未来,以及它们给开发者带来的便利和挑战。
368 6
|
JavaScript 容器
form-create-designer中怎么扩展自定义组件
该内容是关于在某个框架(可能是Vue)中导入和使用自定义组件的教程。首先,通过`import`语句引入自定义组件`MyButton`和`FcDesigner`。然后,使用`FcDesigner.component()`或`app.component()`方法挂载组件。接着,定义组件的拖拽规则,包括其在菜单的位置、图标、名称和唯一ID,以及组件的渲染和属性配置规则。最后,将组件的拖拽规则挂载到设计器(`$refs.designer`)中,以便在界面上使用。
805 2
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
4720 0