vue2 antd a-directory-tree 渲染数据 默认全部展开

Vue2 中使用 Ant Design 的 `a-directory-tree` 组件渲染树状目录数据并默认全部展开，你可以通过设置组件的属性来实现。首先，你需要安装所需的依赖库，然后在组件中配置如下：

1. 安装依赖：

npm install @ant-design/icons antd @vueuse/core # 如果你还没有安装的话

2. 在 Vue 项目中引入组件和相关的库：

import { useAntd } from '@vueuse/core';
import DirectoryTree from 'antd/lib/tree/directory_tree.vue'; // 或者 import { DirectoryTree } from 'antd';

3. 使用 `DirectoryTree` 组件，并在 data 部分设定初始状态为所有节点都已展开：

<template>
  <DirectoryTree :data="treeData" :defaultExpandedKeys="['*']" />
</template>

<script setup>
const {.antd} = useAntd();

// 初始化的数据，假设这是你的目录结构
const treeData = [
  {
    title: '根节点',
    key: '0',
    children: [
      { title: '子节点1', key: '1' },
      { title: '子节点2', key: '2', defaultExpanded: true }, // 设置默认展开
      { title: '子节点3', key: '3' }
    ]
  }
];

export default {
  components: {
    DirectoryTree
  },
  data() {
    return {
      treeData,
    };
  }
};
</script>

在上面的例子中，`defaultExpandedKeys` 属性接受一个数组，值为 '*' 表示所有的节点都将默认展开。