el-select默认选中第一个

`el-select` 是 Element UI 中的一个下拉选择组件，在Vue框架中，默认情况下，如果你没有指定其他选项的状态，它会自动选中第一个列出的选项。你可以通过设置 `value` 属性来控制默认选中的值，这个属性通常对应于你数据数组中的一个对象或者值。 例如，假设你的选项列表数据是这样的： ```javascript data() { return { options: [ { value: 'option1', label: 'Option 1' }, { value: 'option2', label: 'Option 2' }, { value: 'option3', label: 'Option 3' } ] }; } ``` 然后在模板中绑定 `options` 到 `el-select` 的 `value`: ```html <el-select v-model="options.value"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select> ``` 这里 `v-model="options.value"` 表示默认选择第一个 `options` 对象的第一个值。如果 `options` 数组为空，或者你想自定义初始选中的值，你需要相应地调整 `v-model` 的绑定值。

### 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` 避免因异步更新引发的问题。 ---