元素
元素
工具
博客
问答

TDesign Tree组件如何实现默认展开所有节点？

❤美菊 阅读 64
组件

我在用 TDesign 的 Tree 组件时，想让树一加载就全部展开，但文档里没找到直接的属性。试了 expanded 属性传入所有节点的 key 数组，但数据是异步加载的，刚渲染时拿不到完整的 keys，导致无效。

有没有办法在数据加载完成后自动展开全部？或者有类似 defaultExpandAll 这样的配置项？

const treeRef = ref();
onMounted(() => {
  fetchData().then(res => {
    treeData.value = res;
    // 此时想展开全部，但不知道怎么触发
  });
});
TDesignTree树形
我来解答 赞 11 收藏
二维码
手机扫码查看
反馈
2 条解答
极客柯豫
极客柯豫 Lv1
TDesign 的 Tree 组件确实没有直接提供 defaultExpandAll 这种属性，但你可以通过在数据加载完成后手动触发展开来实现。具体来说，可以在数据加载完成后，通过调用 Tree 组件提供的方法来展开所有节点。

首先，确保你在模板中为 Tree 组件绑定了一个 ref，比如你已经做了 const treeRef = ref();。然后在数据加载完成之后，通过这个 ref 调用 Tree 组件的 expandAll 方法来展开所有节点。

修改你的代码如下：

const treeRef = ref();



onMounted(() => {

  fetchData().then(res => {

    treeData.value = res;

    // 数据加载完成后，调用 expandAll 方法

    treeRef.value.expandAll();

  });

});


这样，当你的数据加载完成并且赋值给 treeData 后，会立即调用 Tree 组件的 expandAll 方法，从而展开所有节点。记得检查下 TDesign 的文档，确认 expandAll 这个方法是否存在，因为不同版本的方法可能会有所不同。如果这个方法不存在，可能需要手动遍历所有节点并逐个展开，那就稍微麻烦点了，不过好在你只需要做一次，性能影响也不大。
点赞
2026-03-22 16:06
树灿 Dev
树灿 Dev Lv1
这个问题我刚好踩过坑，说下我的解决办法。

TDesign的Tree组件确实没有defaultExpandAll这个属性，但它提供了expandAll方法，可以用来在数据加载完成后手动触发全展开。

你的代码改成这样：

const treeRef = ref();



onMounted(() => {

  fetchData().then(res => {

    treeData.value = res;

    // 关键点：数据加载完成后调用 expandAll()

    // 需要等待DOM更新后再调用，所以用 nextTick

    nextTick(() => {

      treeRef.value?.expandAll();

    });

  });

});


原理很简单：expandAll是Tree组件实例上的方法，它会递归展开所有节点。你数据加载完成后调用它就行了。

如果你的树节点特别多，可能会有性能问题，那时候可以改成只展开到某一层级：

// 只展开前两层

nextTick(() => {

  treeRef.value?.expandAll({

    levels: 2  // 这个参数要看具体版本是否支持

  });

});


另外一个思路是用expanded属性做受控展开，但需要你自己维护一个allKeys数组，复杂度更高，不如直接用expandAll方法来得直接。

对了，如果你的数据加载后树组件还没渲染出来，nextTick是必须的，否则expandAll可能找不到节点。
点赞
2026-03-16 15:08
相关推荐
元素
元素
工具
博客
问答
登录/注册