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

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

五、参考资料

 六、欢迎交流指正。