时间戳

首页 > 解决方案 > Default-expand-all 不适用于 q-tree？Vue.js

vue.js - Default-expand-all 不适用于 q-tree？Vue.js

问题描述

我必须编写一个 Web 应用程序，最重要的元素是 q-tree。我已经能够加载和显示数据（传递一个名为列表的数组），但我希望所有节点都被扩展。

官方文档的 vue.js 示例表明您可以使用 'default-expand-all' 属性来执行此操作，但这对我不起作用。

它只向我显示带有箭头的根节点，我必须手动展开子节点。

    <q-tree
     :nodes="list"
     :selected.sync="selected"
     @update:selected="onSelectionChangedNode"
     node-key="NodeNr"
     label-key="NodeTxt"
     default-expand-all
    ></q-tree>

标签： vue.jsnodes

解决方案

解决了我的问题如下：

我在 QTree DOM 元素中添加了一个 ref 属性，这使得访问 QTree API 的预定义方法成为可能。

      <q-tree
        :nodes="list"
        :selected.sync="selected"
        @update:selected="onSelectionChangedNode"
        node-key="NodeNr"
        label-key="NodeTxt"
        **ref="nodes"**
      >

我一直在使用的函数是expandAll()。

updated() {
      this.$refs.nodes.expandAll();
}

对我来说最重要的是，我必须找出适合我的生命周期钩子。update() 钩子是我正在寻找的钩子。

原因：

在数据更改后调用会导致重新渲染和修补虚拟 DOM。

调用此钩子时，组件的 DOM 将已更新，因此您可以在此处执行依赖于 DOM 的操作。

推荐阅读