element组件库笔记一：element 框架中table表格复选框选中后，切换下一页之前选中复选框和数据消失的问题

前言

使用 element 组件库 编写管理 系统时遇到了一个问题，特来记录下

一、问题描述

element 中 table 组件 的复选框，当前页面选中后，切换到下一页后，那之前选中的复选框和数据都会消失，也就是复选框只作用于当前页面。

二、解决方式

从网上找了下资料和看了下官网组件库。发现挺简单的，直接看代码吧

1. HTML 代码

只看关键地方，其余省略

<!--列表-->
<el-table id="el-table" size="small" @selection-change="selectChange" :data="userData" stripe ref="multipleTable"
          highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" :row-key="getRowKey"
          style="width: 150%;">
  <!--复选框-->
  <el-table-column align="center" :reserve-selection="true" type="selection" min-width="5%">
  </el-table-column>
  <el-table-column type="index" align="center" label="序号" width="70">
    <template slot-scope="scope">
      <span>{
  {(formInline.pageNo - 1) * formInline.pageSize + scope.$index + 1}}</span>
    </template>
  </el-table-column>
</el-table>

// 返回唯一值
getRowKey(row) {
  // console.log('================:', JSON.stringify(row))
  return row.id
},
// 选择复选框事件
 selectChange(val) {
   // console.log('======================:', JSON.stringify(val))
   this.selectdata = val // selectdata  是一个数组，存取选中的数据
 },

1. el-table 标签上添加 :row-key="getRowKey"

   行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。

2. el-table-column 标签上 添加： :reserve-selection="true"

   仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）

2. 官网地址

element table 传送门：https://element.eleme.cn/#/zh-CN/component/table