vue2-org-tree 节点展开无效 expand不生效问题(已解决)

vue2-org-tree节点展开方法如下

 onExpand(e,data) {
      if ("expand" in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },

但是展开好像只对根节点生效
原因:
vue2-org-tree没有绑定Key值
以上代码最后增加orgKey++ 使节点展开后刷新就可以了

 <vue2-org-tree
          name="organ"
          :key="orgKey"
          />
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2-org-tree 中实现节点的懒加载可以通过以下步骤完成: 1. 首先,你需要在组件中定义一个属性来表示节点是否已经加载。可以在节点对象中添加一个属性,例如 `loaded`,用于标记节点是否已经加载。 2. 接下来,在组件中创建一个方法,例如 `loadChildNodes`,用于加载子节点的数据。这个方法可以通过异步请求获取数据,并将获取到的数据添加到对应的节点中。 3. 在模板中,你需要根据节点的状态来渲染 UI。你可以使用 `v-if` 或者 `v-show` 根据节点的 `loaded` 属性来控制子节点是否显示。 4. 当用户展开一个节点时,你可以监听相应的事件(例如 `click` 或者 `expand`),在事件处理函数中调用 `loadChildNodes` 方法来加载子节点数据并更新节点的状态。 下面是一个简单的示例代码: ```vue <template> <div> <ul> <li v-for="node in treeData" :key="node.id"> <span @click="toggleNode(node)">{{ node.name }}</span> <ul v-if="node.expanded && !node.loaded"> <li v-for="childNode in node.children" :key="childNode.id"> <span>{{ childNode.name }}</span> </li> </ul> </li> </ul> </div> </template> <script> export default { data() { return { treeData: [ { id: 1, name: 'Node 1', expanded: false, loaded: false, children: [] }, // Other nodes... ] }; }, methods: { toggleNode(node) { node.expanded = !node.expanded; if (node.expanded && !node.loaded) { this.loadChildNodes(node); } }, loadChildNodes(node) { // Simulate an async request to load child nodes data setTimeout(() => { node.children = [ { id: 2, name: 'Child Node 1' }, { id: 3, name: 'Child Node 2' }, // Other child nodes... ]; node.loaded = true; }, 1000); } } }; </script> ``` 在上面的代码中,`treeData` 数组表示树的数据结构,每个节点对象都包含一个 `loaded` 属性用于标记节点是否已经加载,以及一个 `children` 属性用于存储子节点数据。`toggleNode` 方法用于切换节点展开状态,当节点展开时,会调用 `loadChildNodes` 方法来加载子节点数据,并在加载完成后更新节点的状态。 请注意,上述代码只是一个简单示例,你可以根据自己的需求进行相应的修改和扩展。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值