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

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

五、参考资料

六、欢迎交流指正。

 

相关文章
|
6月前
|
前端开发 微服务
Element-Plus 表格 el-table 如何支持分页多选
Element-Plus 表格 el-table 如何支持分页多选
|
JavaScript
Vue表格显示问题:v-show无法影响el-table-column列的解决方案
Vue表格显示问题:v-show无法影响el-table-column列的解决方案
862 0
|
1月前
|
JavaScript
el-table 使用了 修改行使用了v-model双向绑定 如何记录修改前的数据
el-table 使用了 修改行使用了v-model双向绑定 如何记录修改前的数据
90 1
|
4月前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
488 4
|
JavaScript
el-select下拉多选框 el-select 设置默认值不可删除功能
Element-UI是一款广泛使用的Vue.js组件库,其中El-Select下拉多选框组件在实际项目开发中经常被使用。然而,在Element 3.0版本中,El-Select下拉多选框默认值可被删除,这可能会导致一些意外情况。本文将介绍如何解决这个问题,实现El-Select下拉多选框设置默认值不可删除的功能。
673 0
el-select下拉多选框 el-select 设置默认值不可删除功能
|
开发者
element el-table固定列凹陷问题
element el-table固定列凹陷问题
114 0
|
缓存 JavaScript 前端开发
el-table 列的动态显示与隐藏
当我们在对表格数据查看的时候,可能某些列的数据是当前想要重点关注的,而某些列并不需要展示出来,我们就可以通过对表格的列进行实时的一个切换去实现动态的显示与隐藏。
|
前端开发
el-table表格还可以这么玩
我们都知道表格是横向渲染的,一行一行去展示。不过博主这里有个需求是纵向渲染,一列一列去展示,下面是全部代码,分享出来或许能帮到你们
289 1
el-table表格还可以这么玩
|
前端开发
Element ui 表格(Table)组件中前端实现数据分页和模糊查询
Element ui 表格(Table)组件中前端实现数据分页和模糊查询
574 0
Element ui 表格(Table)组件中前端实现数据分页和模糊查询