vue3 el-select 默认选中第一个 - 详解

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

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

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

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

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);

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

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

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

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

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);

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