vue3 el-select 默认选中第一个

在Vue 3中使用el-select组件时，如果你想默认选中第一个选项，可以通过几种方式来实现。这里我将介绍两种常见的方法：

方法1：使用v-model绑定默认值

首先，确保你已经正确安装并引入了Element Plus库，这是Vue 3版本的Element UI库。

在你的el-select组件中，你可以通过v-model绑定一个变量，并将这个变量的初始值设置为你想默认选中的选项的值。

<template><el-select v-model="selected"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</template><script setup>
import { ref } from 'vue';const options = ref([{ value: 'option1', label: 'Option 1' },{ value: 'option2', label: 'Option 2' },{ value: 'option3', label: 'Option 3' }
]);// 默认选中第一个选项
const selected = ref(options.value[0].value);
</script>

方法2：使用:default-value（不推荐，因为在新版Element Plus中已废弃）

在旧版本的Element UI中，你可以使用:default-value属性来设置默认选中的值。但在Element Plus中，这种方法已被废弃。因此，推荐使用上面的v-model方法。

方法3：通过计算属性或方法动态设置默认值

如果你需要在某些条件下动态设置默认选中的值，你可以使用计算属性或方法。例如，你可以基于某些条件来决定默认选中哪个选项。

<template><el-select v-model="selected"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</template><script setup>
import { ref, computed } from 'vue';const options = ref([{ value: 'option1', label: 'Option 1' },{ value: 'option2', label: 'Option 2' },{ value: 'option3', label: 'Option 3' }
]);// 动态设置默认选中的值（例如，总是选中第一个）
const selected = computed(() => options.value[0].value);
</script>

在Vue 3和Element Plus中，推荐使用v-model来绑定默认选中的值。这种方法既简单又符合Vue的响应式原理。确保你的Element Plus版本是最新的，以避免使用已废弃的功能。如果你有特殊的需求（如动态选择默认值），可以使用计算属性或方法来实现。