默认-展开-所有不工作的Q-树？Vue.Js
我必须编写一个web应用程序，最重要的元素是Q树。我已经能够加载和显示数据(传递一个名为list的数组)，但我希望扩展所有节点。
官方文档的vue.js示例表明，您可以使用“默认-展开-所有”属性来完成这一任务，但这对我来说并不适用。
它只显示带有箭头的根节点，其中必须手动展开子节点。
<q-tree
:nodes="list"
:selected.sync="selected"
@update:selected="onSelectionChangedNode"
node-key="NodeNr"
label-key="NodeTxt"
default-expand-all
></q-tree>回答 3
Stack Overflow用户
发布于 2019-05-15 08:41:30
解决了我的问题如下：
我向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的操作。
Stack Overflow用户
发布于 2019-09-20 17:29:08
从接受的答案中得到一个提示，我意识到dom已经在第一次呈现时用树组件创建了。
在我的用例中，当数据从服务器返回时，我想更新树。因此，我不得不强制它使用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"
>Stack Overflow用户
发布于 2019-05-14 12:28:34
默认的-展开-所有只应用于该组件的第一个呈现。因此，如果您的组件在节点未分配时呈现，则如果随后分配，它们将不会展开。
https://v1.quasar-framework.org/vue-components/tree
如果在第一次呈现时没有节点，则必须使用范围为范围的槽和扩展的属性。
https://stackoverflow.com/questions/56125406
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号