Vue3+ Element-plus，使用el-select 循环多个下拉选择框时，选项option不能重复被选；选择后的option，在别的下拉中显示禁用状态

发呆的小蔡°

已于 2024-04-17 11:06:49 修改

阅读量1.6k

点赞数 18

分类专栏： Vue3.2 element-plus 文章标签： Vue3 Element-plus el-select

于 2024-04-17 11:00:28 首次发布

本文链接：https://blog.youkuaiyun.com/Shivy_/article/details/137863683

版权

本文介绍了如何在Vue3和Element-plus框架下，使用el-select组件创建多个下拉选择框时，确保已选择的option不重复并显示为禁用状态。通过示例代码展示了实现这一功能的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

在Vue3.2中使用Element-plus框架里的 el-select，实现循环多个下拉选项列表；下拉列表数据为同一个；但是当前已经选中的option，在别的下拉中显示为禁用状态；如下图所示；

在这里插入图片描述

代码：

<div v-for="(option,index) in titleList" :key="index">
   <div class="login-item login-register-code flex flex-row align-items-center">
     <div class="title">{
  {option}}：</div>
     <el-form-item style="width: 80%; margin-bottom:0 ">
       <el-select v-model="selectedOptions[index]" placeholder="请选择问题"
         @change="handleSelectChange(index)" clearable
       >
         <el-option :label=</