Ant-design-vue 树形控件异步加载，解决只加载一次的问题

于 2023-10-31 17:55:49 发布
阅读量844 收藏 1
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44109000/article/details/134145946
版权

解决方案：

  1. LoadData 方法点击节点异步加载数据 expandedKeys: 展开的节点， LoadedKeys: 已加载的节点， 返回的数据中要有isLeaf判断是不是末级节点   onExpand: 点击节点的时候触发

2. 异步加载的时候，将触发节点的id  放到loadedKeys 的集合中，记录已加载的节点的id

3. key为展开节点的一个集合， 判断如果已加载的节点的长度 大于 展开节点的长度，树形结构的节点处于部分收起的状态，把展开的集合赋给已加载的节点的集合， 这样，收起的节点处于处于未加载状态， 展开节点和已加载节点保持一致，便于下次点击节点重新查询子节点

注意事项：

 树形结构只加载一次的， 可通过加一个key 值来实现，这样每次点击节点都会重新加载子节点，

  

但是会引发出新问题，节点不能跨级收起，第二级节点未收起来的情况下，第一级节点点击小三角符号是不生效的，只能一层一层的收起

wangting 
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决ant design vue中树形控件defaultExpandAll设置无效的问题
01-18
defaultExpandAll 仅在组件第一次渲染时有效，不仅仅tree组件，其它组件的defaultXXX值都是这个行为， 可以自行搜索受控组件/非受控组件的概念。如果你想异步获取数据后展开全部结点，可以使用非受控方式： ...
ElementUi el-tree动态加载节点数据 load方法触发机制
最新发布
c327127960的博客
06-04 781
ElementUi el-tree动态加载节点数据 load方法触发机制
antd tree异步加载，只有首次点击加载，再次点击不加载问题
weixin_44874595的博客
12-27 7433
场景：最近做tree异步加载的功能，但是发现只有我第一次点击的时候，会调用方法加载，后面再点击都不会再加载。 需求：每次点击都会加载 解决方法： 用onExpand，onLoad，loadedKeys，expandedKeys <Tree showIcon blockNode loadData={this.onLoadData} onLoad={this.onLoad} // 节点加载完毕时触发 onSelect={this.onSelectTree} selecte
ant design of vue a-tree 异步加载
SSophia的博客
09-01 5344
a-tree 异步树真是太多坑了，不显示文字，点击根节点没反应，点击子节点没反应，点击子节点出现的是上一个子节点内容，切换是否展示监管部门时点击过的子节点没反应，好在问题都一一解决了，记录一下。 <a-checkbox @change="onCheckboxDeptChange"> 是否展现非监管部门 </a-checkbox> <a-tree :replaceFields="replaceFields" :loadedK
ant design vue树形表格异步加载
weixin_50003020的博客
06-30 3168
ant design vue树形表格异步加载,自定义展开图标
antd tree 懒加载+局部刷新
hfhwfw161226的博客
09-29 5535
针对懒加载的树组件，节点数据发生变化后，只刷新局部数据，拿到最新的节点
Ant Design中Tree组件使用（包括异步加载子节点）
duansamve的博客
02-02 5347
import React, { Component } from 'react' import { Tree } from 'antd' const { DirectoryTree } = Tree; export default class tree extends Component { state = { } /** * 树 */ getTreeData = () => { return [ {.
ant design 的树形控件异步数据加载方法
热门推荐
luzhaopan的博客
12-03 2万+
1、在state中定义点击加载时异步加载的数据源treeData  state = { treeData: [], }  2、 在render 的return中Tree组件调用onLoadData方法 render() { return ( &lt;Tree loadData={this.onLoadData}&gt; &lt...
antd4的cascader动态加载需要点击两下才会加载子级数据,而且加载的是第一次请求的
qq_41549657的博客
02-10 1127
我的需求是使用cascaser的动态加载和多选功能 首先多选功能是需要4.17.0版本才有的，一开始没注意到自己antd的版本比较低，还以为这两个功能不能合并在一起 还有遇到的一个问题就是需要点击两下才会加载自己数据 首先附上官网的示例代码 const loadData = selectedOptions => { const targetOption = selectedOptions[selectedOptions.length - 1]; // 这行可设置可不设置
vue实现带复选框的树形菜单
10-16
在Vue.js框架中实现带复选框的树形菜单是一种常见的UI设计，通常用于显示层次结构的数据，并允许用户进行多级选择。这个例子展示了如何结合第三方库ZTree来创建这样一个功能。ZTree是一个基于JavaScript的树状菜单...
ztree实现权限横向显示功能
01-19
1、同步改为异步，虽然不卡，但是功能不满足，很多人勾选了一个父节点（模块节点），就保存，此时子节点根本没有，所以保存的数据是有问题的。 2、设置showIcon和showLine为false，发现速度有一丢丢的提升，但是产品...
vue-test.zip
10-09
2. **Ant Design Vue**: Ant Design Vue是一个基于Ant Design设计语言的Vue组件库，提供了丰富的UI组件，如按钮、表单、表格、布局等，提高了开发效率和界面的美观性。在项目中，可能会有`antd.css`或`antd.js`这样...
多选的树控件
05-22
"多选的树控件"是一种常见的用户界面元素，它允许用户在一个层次结构的数据结构中进行选择，而且支持选择一个以上的项目。这种控件广泛应用于文件管理器、设置菜单、数据库管理工具等多个场景。 首先，我们需要理解...
vue项目中打开el-dialog时只加载一次，以及切换组件时el-table闪烁问题
m0_65835778的博客
02-03 1624
elementui使用注意事项
Vue2在生命周期钩子 mounted中请求数据 数据只会加载一次，如果别的组件或则分页想要数据，数据会请求不到
m0_72788309的博客
02-24 937
解决办法：数据请求写道方法里面，函数调用写到mounted 钩子里面。
vue + element el-dialog组件内只调用一次问题
weixin_46733392的博客
12-16 2266
在列表里面使用 编辑或者查看等，使用 el-dialog组件 时候，发现问题 el-dialog 里面 存放小组件后 但是全程只加载一次这个小组件，每次打开都不重新加载。是因为el-dialog 方法使用的底层是 display: none; 说到这大概你就知道怎么做了. 只需要在el-dialog上添加 v-if = “dialogVisible” 就解决了 。 但是 如果你组件内写的东西很多就会影响性能问题 不过你的需求效果达到了问题就解决了 ...
Element ui tree懒加载 第一层级只触发一次时解决方法
m0_68925632的博客
03-08 495
1 在node.level === 0时，存储node和resolve 2 在方法里把存储node的childNodes 清空
ant-design-vue的树形控件怎么用
04-21
你好，关于ant-design-vue树形控件的使用，以下是一个简单的代码示例： ``` <template> <a-tree :tree-data="treeData"></a-tree> </template> <script> export default { data() { return { treeData: [ { title: 'Parent Node 1', key: '0', children: [ { title: 'Leaf Node 1-0', key: '0-0' }, { title: 'Leaf Node 1-1', key: '0-1' }, ], }, { title: 'Parent Node 2', key: '1', children: [ { title: 'Leaf Node 2-0', key: '1-0' }, { title: 'Leaf Node 2-1', key: '1-1' }, ], }, ], }; }, }; </script> ``` 其中，我们在模板中使用 `<a-tree>` 标签来生成树形结构。我们也可以通过传递 treeData 来自定义树形结构。 希望这个简单的示例能够解决你的问题。如果你有其他问题或者需要更多帮助，请随时回复我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值