前言

某次开发中有个需求功能是多级表格，由于当时项目是用 vue.js 搭配 element-ui，因此开始时多级表格也是用的el-table实现的。后面发现在数据初始化的时候一切正常，但是当异步改变数据的时候就出现了问题，如下图：
表格中的数据共有三级，其中二级、三级均是点击“展开”图标时异步请求的，表格上方的一排多选框是用来控制下方表格数据的显示隐藏——当取消选中时，需重新请求接口数据，表格中对应的一级、二级、三级数据均不展示。但实际结果为：隐藏一级父级数据后，二、三级数据并没有跟随隐藏。。。。。而是直接被挂到了下面顶替原一级数据的子级位置上，下面给出解决方案：

image.png

解决办法：

 //删除一级数据后，将整个懒加载的lazyTreeNodeMap手动清空
this.$set(this.$refs.tableFee.store.states.lazyTreeNodeMap, deleteRowId, []);//deleteRowId：删除的一级数据的id，可在数据初始化时自定义该id