vue3 el-select默认选中

在 Vue 3 中使用 Element Plus 的 <el-select> 组件时，如果你想要让某个选项默认选中，可以通过设置 <el-select> 组件的 v-model 属性绑定一个响应式的变量，并将该变量的值设置为你想要默认选中的选项的值。

这里有一个简单的例子来展示如何实现这个功能：

首先，确保你已经安装并正确引入了 Element Plus。
在你的 Vue 组件中，定义一个响应式的变量来存储选中的值。
在 <el-select> 组件的 v-model 属性中绑定这个变量。
在 <el-option> 组件中使用 :value 属性来指定每个选项的值，并通过 :label 属性来指定选项的显示文本。

示例代码如下：

复制代码

<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: '选项1' },
  { value: 'option2', label: '选项2' },
  { value: 'option3', label: '选项3' }
]);
 
// 定义选中的值，默认为 options 中的第一个值或者你想要默认选中的值
const selected = ref(options.value[0].value); // 或者你可以设置为任何存在的 value，例如：'option2'
</script>

在这个例子中，selected 是用来存储当前选中值的响应式变量。我们通过将 selected 的初始值设置为 options 数组中某个选项的 value 来实现默认选中。如果你想要默认选中特定的项，只需在设置 selected 的初始值时指定正确的 value 即可。例如，如果你想要默认选中"选项2"，你应该将 selected 的初始值设置为 'option2'。

确保你的 Vue 组件已经正确引入了 Element Plus 的 <el-select> 和 <el-option> 组件，这样上述代码才能正常工作。如果你使用的是 Element Plus，通常需要在你的项目根组件中全局引入 Element Plus 或者在需要使用 Element Plus 的组件中局部引入。