12-02 01:09 阅读 117

关注

Element UI 多选表格 分页保存数据遇到的问题

前言

在使用Element UI 多选表格的时候，遇到了分页保存选择数据的问题，直接采用官方的方法很容易就实现了，但是在之后的另一个页面的时候，找了好久都是一直报错，至到我把成功实现功能的页面数据和当前的页面数据进行了对比，才算是找到了问题，在这里记录一下，心态都有点崩。。。

功能实现

直接使用ElementUItable多选表格，直接将代码复制粘贴，即可生成如下表格：

之后将数据以及表格换成自己的数据以及显示内容：

分页保存数据

在选择数据的时候，很容易就会存在多选分页，这就需要在点击下一页的时候，保存上一页选择好的数据，可以采用官方的方法实现：

代码实现如下：

1. 在表格中添加如下代码：

<el-table             height="450"             ref="multipleTable"             :data="tableData"             tooltip-effect="dark"             style="width: 100%"             @selection-change="handleSelectionChange" //多选方法             :row-key="               (row) => {                 return row.id; //保存选择数据的id，id为后端返回的每一条数据的id               }             "           > 复制代码

1. 在多选框代码中添加一下代码：

<el-table-column               :reserve-selection="true" //开启分页回显               type="selection"               width="55"             >             </el-table-column> 复制代码

即可实现点回到上一页时，仍热保留选中的数据

遇到问题

在采用官方的方法实现这个功能之后，我在另一个页面也采用这个方法，但是却无法实现，而且还报出以下错误：

一看就是row-key的问题，但是我已经绑定了id,之后就一直在处理这个问题，刚开始以为是格式的问题，毕竟后端返回的两个id的数据类型不同，后端两次返回的数据如下：

1. 成功实现功能的

1. 功能实现失败的

之后我觉得是不是因为id的类型不一样所以才不行，之后我就进行了类型的转换，发现还是不行。。。，依旧是row-key的问题

解决

本来我都打算不行就采用其他的方法，不过想着自己其他的功能都已经写好了，在试试看，然后就把实现成功的数据和实现失败的数据都取了几个写成了静态数据，通过比较它们两个来查找问题，最中比较结果如下：

很明显不是id的问题，之后就开始删除字段一个个比较，当删除children字段的时候，发现没有再报错，而且可以正常实现，那也就是说children字段影响了该功能的实现，那么要做的就是把后端返回的children字段去掉

处理如下：

在删除了children字段后就可以正常实现了

作者：月__
链接：https://juejin.cn/post/7036936225827061797

 伪原创工具 SEO网站优化  https://www.237it.com/