在Vue 3中，el-select循环el-option的常见踩坑点，value值绑定对象类型？选中效果不准确？

在Vue 3中，el-select 组件是来自 Element Plus UI 库的一部分。

如果你想要设置默认选中的选项，你可以使用 v-model 来绑定选中的值。如果你想要在某个时刻让某个选项显示为已选中，可以设置对应的值到 v-model 绑定的数据。

cpp 复制代码

<template>
  <el-select v-model="selectedValue" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const selectedValue = ref(''); // 绑定的选中值
    const options = ref([ // 下拉选项数据
      { label: '选项1', value: 'option1' },
      { label: '选项2', value: 'option2' },
      { label: '选项3', value: 'option3' }
    ]);
    // 默认选中第一个选项
    selectedValue.value = options.value[0].value;
  }
};
</script>

实际开发场景使用中，有时候循环的options数据结构比较复杂嵌套层次也比较多时，
如果不注意value的值绑定的是个对象类型，会发现每个选项都是选中效果，这显然是不对的

当el-option的value值是对象类型时，你需要确保v-model绑定的值也是相同类型的对象，并且它们可以通过引用或者深度比较（例如，通过比较对象的属性和值）来匹配。在Vue中，对于对象类型的比较，Vue会使用===操作符，这意味着两个对象必须是同一个引用才会被认为是相等的。

如果你的v-model绑定的值是一个对象，并且你想要在el-option列表中选择一个与这个对象相匹配的选项，你需要确保列表中的每el-option的value都是对应对象的引用，或者你可以提供一个方法来比较两个对象是否相等（这通常更复杂且不推荐）。

不过，更常见的做法是使用对象的某个唯一属性（如ID）作为el-option的value，而不是整个对象

这样，v-model绑定的值就会是这个唯一属性，而不是整个对象。这样做更简单，也更符合Vue的响应式系统。

下面是一个使用对象的ID作为value的例子：

使用 :value="item.value.id" 而不是:value="item.value"

cpp 复制代码

 const options = ref([ // 下拉选项数据，每个选项有一个唯一的id和一个label
      {label: '选项1' ,value:{id:1}},
      { label: '选项2' ,value:{id:2}},
      { label: '选项3' ,value:{id:3}},
    ]);

 <el-select v-model="selectedId" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.label"
      :value="item.value.id">
    </el-option>
  </el-select>

当你value的值绑定的是个对象类型，发现每个选项都是选中效果

同时F12 时，你发现每个el-option都有aria-selected="true"，这可能是由于value和v-model值得类型不一致且不等，此处再次建议 value的值近量不要绑定一个对象类型的值，

aria-selected="true" 是一个ARIA (Accessible Rich Internet Applications) 属性，它用于表示当前选中的选项。并且该选项会添加类名'selected'>

在ElementPlus或其他类似的UI库中，每个el-option标签上不应该在初始状态下都拥有aria-selected="true"属性，因为这意味着每个选项都被认为是选中状态，这显然是不正确的。一个下拉列表或选择器el-select中应该只有一个选项被选中，并且只有这个选项应该拥有aria-selected="true"属性。

如果以上都没问题再查看其他原因如下：

1.Bug或错误实现：可能是Element Plus库的一个bug，或者是你使用的某个版本中的错误实现。你可以尝试更新到最新版本，或者查看Element Plus的issue追踪器，看看是否有人报告了类似的问题。

2.自定义代码或样式：可能你的代码或样式中不小心给每个都添加了aria-selected="true"。检查你的模板、计算属性、方法或全局样式，确保没有错误地设置这个属性。

3.第三方插件或扩展：如果你使用了某些浏览器插件或开发者工具扩展，它们可能会干扰DOM并错误地添加属性。尝试在无痕模式或禁用插件的情况下查看页面，看看问题是否仍然存在。