el-tree 遇上 data 是对象的数组属性之一,视图不能实时更新问题

现象:

elmentUI树,在data属性(数组)push 或者splice一些内容之后,树不会实时更新问题,原来是取到这个data,对其进行push或splice一些列操作之前,需要对这个data 深拷贝一份,然后进行以上操作,最后需要确保这个data 是响应式的,即需要重新$set 到data上:

           let childNodes = utils.objDeepCopy(this.leftTreeData[this.sceneId]);

          let nodeData = response.data.respData; // 这是要新增的数据

          if (childNodes) {

            // 这里先把"加载更多删掉"

            childNodes.splice(childNodes.length - 1, 1);

          }

          childNodes.push(...nodeData)

          if (nodeData.length === this.maxSize && this.maxSize) {

            childNodes.push({ nodeId: 'loadmore' + Math.random(), nodeType: '99' });

          }

          this.$set(this.leftTreeData, this.sceneId, childNodes);

### el-tree 组件数据首次不加载解决方案 对于el-tree组件数据首次不加载的问题,可以考虑采用懒加载的方式优化性能。懒加载意味着只有当用户展开某个节点时才去请求该节点下的子节点数据,而不是一次性获取全部数据。 在实现懒加载功能前,确保已经正确配置了`el-tree`的基础设置: ```html <el-tree :data="treeData" lazy :load="loadNode"></el-tree> ``` 其中`lazy`属性用于开启懒加载模式;而`load`是一个函数名,在此定义如何异步加载子节点的数据[^1]。 为了使懒加载生效,还需要调整JavaScript部分逻辑如下所示: ```javascript export default { methods: { loadNode(node, resolve) { if (node.level === 0) { // 请求根节点数据 this.$axios.get('/api/rootNodes') .then(response => { resolve(response.data); }); } else { // 请求子节点数据 const parentId = node.data.id; this.$axios.post(`/api/childNodes`, {parentId}) .then(response => { resolve(response.data); }); } }, }, }; ``` 上述代码片段展示了如何利用Axios库发送HTTP请求来动态加载不同层次的树形结构数据。每当调用`resolve()`方法传递新获得的数据列表给前端渲染时,就会触发视图更新操作[^2]。 另外值得注意的是,如果遇到内部节点无法正常刷新的情况,则可能是由于缓存机制引起的。此时可以在每次成功加载新的子节点之后手动清除对应DOM元素上的事件监听器或者尝试重新初始化整个组件实例以强制其重绘界面[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值