Vue3 + element-plus实现表格树形数据懒加载_vue3树形数据与懒加载

实现期间，导师让我优化一个管理系统的字典页面

页面加载的非常慢需要十多秒，看了前端代码之后发现里面有一个无意义的循环请求，不知道是谁写的，删除之后本以为就解决了。

没想到还是需要四五秒才能加载出页面，用调试工具看了看发现几乎是后端服务器响应化的时间，打开后端，找到接口，查看服务层，里面有个循环查询数据库，找到原因

但不知道如何修改，能想到的是直接上redis，但是又觉得没必要，后面想到直接表格数据懒加载就可以

<el-table ref="tableEle" 
         :data="tableData" 
         row-key="pId" 
         v-loading="loading"
         border
         lazy
         :load="load"
         :tree-props="{ hasChildren: 'hasChildren' }"
         @selection-change="handleSelectionChange">
         .........
</el-table>

写完测试发现点击根节点之后，一直加载不出来

最后报错显示 超出虚拟栈运行内存
后来发现是点击按钮之后传过来的数据中还带着父类数据，row-key的值重复了，导致疯狂迭代，把父类数据过滤掉就可以了

所以要注意的就是，row-key中的数据，必须唯一