treeselect 设置默认展开

### Vue 中 `@riophae/vue-treeselect` 的默认展开设置 对于 `@riophae/vue-treeselect` 组件，默认展开可以通过配置属性来实现。具体来说，可以使用 `default-expand-level` 属性指定初始状态下要展开的层级数量。 ```html <template> <treeselect v-model="form.resourceIds" :multiple="true" :options="options" :flat="true" :default-expand-level="1" <!-- 这里设置了默认展开一层 --> :load-options="loadOptions" placeholder="选择上级模型"/> </template> <script> import Treeselect from '@riophae/vue-treeselect' import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect' export default { components: { Treeselect }, } </script> ``` 通过上述方式可以在初始化时控制树形结构的第一层被自动展开[^1]。 ### React 中 Ant Design TreeSelect 的默认展开设置 在 React 使用 Ant Design 的 `TreeSelect` 组件时，则需借助于状态管理以及事件处理函数来进行更灵活的控制。下面是一个简单的例子展示如何让某些特定节点处于已展开的状态： ```jsx class MyPage extends PureComponent { state = { treeExpandedKeys: [] }; componentDidMount() { const { codeselect } = this.props; // 初始化时只展开第一层 this.setState({ treeExpandedKeys: [codeselect.managecomTreeData[0].key] }); } onTreeExpand = expandedKeys => { console.log('expanded:', expandedKeys); this.setState({ treeExpandedKeys: expandedKeys }); }; render() { return ( <TreeSelect treeExpandedKeys={this.state.treeExpandedKeys} onTreeExpand={this.onTreeExpand} ... /> ); } } ``` 这里定义了一个名为 `treeExpandedKeys` 的状态变量用于存储当前应该保持打开状态的键列表，并且每当用户交互触发节点折叠变化时更新该状态[^2]。 ### Element Plus 中 el-tree 的默认展开设置 而在基于 Vue3 的项目中使用 Element Plus 提供的 `el-tree` 组件时，同样支持类似的特性。只需要给定相应的 prop 即可轻松完成需求： ```html <template> <el-tree ref="taskTree" :data="ptreeData" node-key="id" :default-expanded-keys="[firstNodeId]" @node-click="handleNodeClick"> </el-tree> </template> <script setup lang="ts"> const firstNodeId = computed(() => ptreeData.value?.length ? ptreeData.value[0].id : null); nextTick(() => { if (taskTree.value && firstNodeId.value !== null) { taskTree.value.setCurrentKey(firstNodeId.value); } }); </script> ``` 此代码片段展示了怎样利用计算属性获取首个节点 ID 并将其作为默认展开的目标之一，同时确保 DOM 更新后再执行相关操作以获得最佳效果[^3]。