前言
某次开发中有个需求功能是多级表格,由于当时项目是用 vue.js 搭配 element-ui,因此开始时多级表格也是用的el-table实现的。后面发现在数据初始化的时候一切正常,但是当异步改变数据的时候就出现了问题,如下图:
表格中的数据共有三级,其中二级、三级均是点击“展开”图标时异步请求的,表格上方的一排多选框是用来控制下方表格数据的显示隐藏——当取消选中时,需重新请求接口数据,表格中对应的一级、二级、三级数据均不展示。但实际结果为:隐藏一级父级数据后,二、三级数据并没有跟随隐藏。。。。。而是直接被挂到了下面顶替原一级数据的子级位置上,下面给出解决方案:
解决办法:
//删除一级数据后,将整个懒加载的lazyTreeNodeMap手动清空
this.$set(this.$refs.tableFee.store.states.lazyTreeNodeMap, deleteRowId, []);//deleteRowId:删除的一级数据的id,可在数据初始化时自定义该id