解决el-table组件中，分页后数据的勾选、回显问题？

问题描述：

    1、记录一个弹窗点击确定按钮后，table列表所有勾选的数据信息2、再次打开弹窗，回显勾选所有保存的数据信息3、遇到的bug：切换分页，其他页面勾选的数据丢失；点击确认只保存当前页的数据；勾选数据保存后但并未回显......

解决方法：

<Modalv-model="showPersons"       title="人员列表"             <!-- 模态框的标题 -->@on-cancel="onClose3"       <!-- 取消按钮的点击事件处理函数 -->width="40%"                 <!-- 模态框的宽度 -->:mask-closable="false"      <!-- 是否可以通过点击遮罩层关闭模态框 -->
><Form :model="personsForm" :label-width="60" inline>     <!-- 表单组件，绑定数据模型personsForm --><FormItem label="姓名：">        <!-- 表单项的标签 --><Input v-model.trim="personsForm.userName" clearable></Input>   <!-- 输入框组件，绑定数据模型personsForm.userName，可清空输入内容 --></FormItem><div class="btns">             <!-- 按钮容器 --><Button @click="onReset1" style="margin-right: 8px">重 置</Button>     <!-- 重置按钮，点击事件处理函数onReset1 --><Button type="primary" @click="userNameSearch">查 询</Button>        <!-- 查询按钮，点击事件处理函数userNameSearch --></div></Form><el-tablev-if="showPersons"           <!-- 控制表格的显示与隐藏 -->ref="personsTable"           <!-- 表格的引用名 -->:data="personsList"          <!-- 表格的数据源 -->style="margin-top: 16px"     <!-- 表格的样式 -->row-key="user_id"            <!-- 表格行的唯一标识符 -->@select="handleSelectionChange"   <!-- 选择某一行时的事件处理函数handleSelectionChange -->@select-all="handleAllChange"      <!-- 全选/取消全选时的事件处理函数handleAllChange -->><el-table-columntype="selection"           <!-- 表格列的类型为选择列 -->width="45"                 <!-- 表格列的宽度 -->:reserve-selection="true"  <!-- 保留之前的选择状态 -->align="center"             <!-- 表格列的对齐方式为居中 -->fixed                      <!-- 表格列固定在左侧 -->/><el-table-column label="序号" width="55" fixed align="center">   <!-- 表格列的标签、宽度、对齐方式 --><template slot-scope="scope">        <!-- 自定义列模板 -->{{ scope.$index + 1 }}             <!-- 显示行号 --></template></el-table-column><el-table-columnlabel="姓名"                         <!-- 表格列的标签 -->prop="user_name"                    <!-- 表格列绑定的数据字段 -->:show-overflow-tooltip="true"       <!-- 当内容溢出时显示tooltip -->/></el-table><Pagev-show="personTotal > 0"              <!-- 控制分页组件的显示与隐藏 -->:total="personTotal"                  <!-- 总条目数 -->size="small"                          <!-- 分页组件的尺寸 -->show-elevator                         <!-- 显示跳转输入框 -->show-sizer                            <!-- 显示每页条数选择框 -->show-total                            <!-- 显示总条目数 -->class="page"                          <!-- 分页组件的样式类名 -->:page-size-opts="[10, 20, 30, 40]"     <!-- 每页条数的选项 -->:page-size="personsForm.pageSize"     <!-- 每页条数的绑定值 -->:current="personsForm.pageNo"         <!-- 当前页码的绑定值 -->@on-change="changePersonsPage"        <!-- 页码变化时的事件处理函数changePersonsPage -->@on-page-size-change="personsPageSizeChange"   <!-- 每页条数变化时的事件处理函数personsPageSizeChange -->/><div slot="footer" align="center">       <!-- 模态框底部的插槽内容 --><Button type="primary" @click="personsSubmit">确 定</Button>   <!-- 确定按钮，点击事件处理函数personsSubmit --></div>
</Modal>

在data中定义暂存勾选的人员Id和人员姓名：

data () {return {personsList: [], // 人员列表listechoList: [],// 人员选中的所有idechoListName: []// 人员选中的所有名字}

首先需要通过接口获取所有待勾选的人员信息，回显之前暂存的数据信息：

// 获取参会人员列表  获取全部人员名单getpersonsList (pageNo, pageSize) {//调用接口personsList(this.personsForm).then((response) => {this.personTotal = response.page.totalthis.personsList = response.data  //暂存所有的人员信息this.$nextTick(() => {this.personsList.forEach(item => {//查询当前列表并回显if (this.echoList.includes(item.user_id)) {//设置当前行数据为选中状态this.$refs.personsTable.toggleRowSelection(item, true); }})})})}

其中“ @on-cancel="onClose3" ”表示关闭modal弹窗后进行的操作：保存勾选数据、清空勾选效果、清空form表单、重置分页信息

    // 关闭人员列表弹框onClose3 () {this.showPersons = false  //关闭modal弹窗this.echoList = []  //置空暂存的勾选人员Idthis.echoListName = []  //置空暂存的勾选人员姓名this.$refs.personsTable.clearSelection();  //清空未保存勾选this.personsForm.pageSize = 10this.personsForm.pageNo = 1this.personsForm.userName = null}

" @select "，“ @select-all ”官网解释如下：

具体实现代码及解释如下：

   // 选择参会人员（已经存在的数据就取消勾选、未存在过的数据就加入勾选）handleSelectionChange(selecteds, row) {if (!this.echoList.includes(row.user_id)) {this.echoList.push(row.user_id);  //暂存新勾选的人员Idthis.echoListName.push(row.user_name);  //暂存新勾选的人员姓名} else {this.echoList.forEach((id, index) => {if (id == row.user_id) {this.echoList.splice(index, 1);  //删除暂存的需要取消勾选的人员Idthis.echoListName.splice(index, 1);  //删除暂存的需要取消勾选的人员姓名}});}},// 全选、取消全选handleAllChange(selecteds) {if (selecteds.length > 0) {selecteds.forEach(item => {if (!this.echoList.includes(item.user_id)) {this.echoList.push(item.user_id);  //暂存新勾选的人员Idthis.echoListName.push(item.user_name);  //暂存新勾选的人员姓名}});} else {this.personsList.forEach(item => {this.echoList.forEach((id, index) => {if (id === item.user_id) {this.echoList.splice(index, 1);  //删除暂存的需要取消勾选的人员Idthis.echoListName.splice(index, 1);  //删除暂存的需要取消勾选的人员姓名}});});}}

最后，记得在关闭弹窗时清空勾选及表单：

   this.echoList = []this.echoListName = []this.$refs.personsTable.clearSelection();this.personsForm.userName = null;