Question

我必须编写一个Web应用程序，最重要的元素是q树。我已经能够加载和显示数据（通过名为list的数组），但是我希望所有节点都得到扩展。

官方文档的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>

Answer 1

default-expand-all仅应用于该组件的第一个渲染。因此，如果您的组件在未分配节点时渲染，则事后分配时它们不会扩展。

https://v1.quasar-framework.org/vue-components/tree

如果在第一次渲染时没有节点，则必须使用作用域插槽和扩展属性。

Answer 2

解决了我的问题，如下所示：

我在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相关的操作。

Answer 3

从已接受的答案中得到提示，我意识到dom已经在第一次渲染时使用树组件创建了。

在我的用例中，我想在服务器返回数据时更新Tree。因此，我不得不强制使用expanded功能重新渲染它，方法是：

this.$nextTick(function () {
              this.$refs.nodes.expandAll();
            })

nextTick函数将在下一个执行窗口中更新dom，此时将通过调用expandAll函数来扩展节点。

注意：对于那些对ref属性上的星号或如何将其添加到组件感到困惑的人，这里是：

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

默认扩展全部不适用于q树吗？ Vue.Js

3 个答案: