前言
使用 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 是一个数组，存取选中的数据
},
el-table标签上添加:row-key="getRowKey"行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。
el-table-column标签上 添加：:reserve-selection="true"仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）
2. 官网地址
element table 传送门：https://element.eleme.cn/#/zh-CN/component/table
