vue3el-tree-select默认选中第一个

### Vue3 中 el-tree-select 组件默认选中第一个节点的实现 在 Vue3 的 `el-tree-select` 组件中，默认选中第一个节点可以通过以下方式实现： #### 1. 使用 `setCurrentKey()` 方法 Element Plus 提供了 `setCurrentKey()` 方法来设置当前高亮显示的节点。通过获取树的数据源中的第一个节点键值，调用此方法即可完成默认选中功能[^3]。 ```javascript this.$refs.treeRef.setCurrentKey(this.data[0].id); ``` 上述代码假设数据源 `data` 是一个数组，并且该数组的第一个对象具有唯一的 `id` 属性作为节点键值。 --- #### 2. 利用 `$nextTick` 确保 DOM 渲染完成后执行逻辑 由于 Vue 的响应式机制，在某些情况下可能需要等待 DOM 更新完毕后再处理默认选中逻辑。可以借助 Vue 提供的 `$nextTick` 函数来确保渲染完成后的操作生效[^2]。 ```javascript this.$nextTick(() => { this.$refs.treeRef.setCurrentKey(this.data[0].id); }); ``` 这里的 `$refs.treeRef` 对应的是模板中绑定到 `<el-tree>` 或者 `<el-tree-select>` 上的 `ref` 值。 --- #### 3. 完整示例代码 以下是完整的实现代码片段： ```vue <template> <div> <!-- Tree Select --> <el-tree-select ref="treeSelect" v-model="selectedValue" :data="treeData" check-strictly node-key="id" placeholder="请选择..." /> </div> </template> <script> export default { data() { return { selectedValue: null, // 当前选中的值 treeData: [ { id: 1, label: 'Node 1' }, { id: 2, label: 'Node 2', children: [{ id: 3, label: 'Child Node 1' }] } ] }; }, mounted() { this.setDefaultSelected(); }, methods: { setDefaultSelected() { if (this.treeData.length > 0) { const firstNodeId = this.treeData[0].id; this.selectedValue = firstNodeId; this.$nextTick(() => { this.$refs.treeSelect?.setCurrentKey(firstNodeId); }); } } } }; </script> ``` --- #### 关键点说明 - **`v-model` 数据绑定**：通过双向绑定变量 `selectedValue` 来存储当前选中的节点 ID。 - **`$refs` 访问组件实例**：利用 `ref` 注册组件实例以便直接调用其 API 方法。 - **`$nextTick` 确保渲染顺序**：当需要依赖于 DOM 结构的操作时，务必使用 `$nextTick` 避免因异步更新引发的问题。 ---