某次开发中有个需求功能是多级表格，由于当时项目是用 vue.js 搭配 element-ui，因此开始时多级表格也是用的el-table实现的。后面发现在数据初始化的时候一切正常，但是当异步改变数据的时候就出现了问题，如下图：
表格中的数据共有三级，其中二级、三级均是点击“展开”图标时异步请求的，表格上方的一排多选框是用来控制下方表格数据的显示隐藏——当取消选中时，需重新请求接口数据，表格中对应的一级、二级、三级数据均不展示。但实际结果为：隐藏一级父级数据后，二、三级数据并没有跟随隐藏。。。。。而是直接被挂到了下面顶替原一级数据的子级位置上，下面给出解决方案：
image.png
//删除一级数据后，将整个懒加载的lazyTreeNodeMap手动清空
this.$set(this.$refs.tableFee.store.states.lazyTreeNodeMap, deleteRowId, []);//deleteRowId：删除的一级数据的id，可在数据初始化时自定义该id
前言 某次开发中有个需求功能是多级表格，由于当时项目是用 vue.js 搭配 element-ui，因此开始时多级...
关键字：element-ui， el-table ，大量数据，树状表格，展开折叠，卡顿，懒加载 遇到难题： ele...
el-table列表可以有层级类型的，可以通过懒加载方式加载自己，但是删除的时候需要做出特别的处理：1、打开的时候...
webpack 懒加载 分割代码会产生chunk，异步加载的时候也会产生chunk 引入动态数据 -> 懒加载（当...
表格数据更新 增加 删除deleteRowsAtIndexPaths左滑删除按键 commitEditingSty...
el-table表格自定义可以使用插槽，但是数据不更新
VUE项目中如何实现表格数据的懒加载 vue+elementUI table表格展示数据，当数据很多的时候，不能一...
AsyncListUtil 可以异步加载数据，并根据列表滑动会自动分页加载，数据加载完成会回调主线程更新UI，并且...
联动下拉框可以满足省市区级联或者多级级联异步加载数据操作。演示地址：http://fslayui.itcto.cn...
今天发现el-checkbox放在el-table里，数据里disabled改变了，视图不及时更新 后来删除了ta...
本文标题：el-table 多级懒加载表格之异步数据更新、删除问题
本文链接：https://www.haomeiwen.com/subject/naxcsktx.html
网友评论