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-option
      v-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-option
      v-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版本是最新的，以避免使用已废弃的功能。如果你有特殊的需求（如动态选择默认值），可以使用计算属性或方法来实现。