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

已于 2024-04-17 11:06:49 修改
阅读量1.2k 收藏 19
点赞数 18
分类专栏： Vue3.2 element-plus 文章标签： Vue3 Element-plus el-select
于 2024-04-17 11:00:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shivy_/article/details/137863683
版权
本文介绍了如何在Vue3和Element-plus框架下，使用el-select组件创建多个下拉选择框时，确保已选择的option不重复并显示为禁用状态。通过示例代码展示了实现这一功能的方法。
摘要由CSDN通过智能技术生成

介绍

在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=</
最低0.47元/天 解锁文章
发呆的薇薇°
关注
  • 18
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue2 - Vue2项目中使用 ElementUI 的 el-select 实现下拉框多选功能
前端充电宝
03-04 742
Vue2项目中使用 ElementUI 的 el-select 实现下拉框多选功能
elementUI form表单 el-select多个下拉选不可重复选择
weixin_68658847的博客
01-12 690
elementUI form表单 el-select多个下拉选不可重复选择
Vue3 select循环多个，选项option不能重复被选
键指江湖的博客
08-31 1614
Vue3 select循环多个，当其中一个option值被选后，其他select里面不能再重复选择该option值。第二种，当其中一个option值被选后，其他select里面就不出现被选option的值。
ElementPlus 之 el-select 多选实现全选功能
都随它大小便吧
05-05 2899
经常会遇到这种多选下拉框支持全选的需求，在此简单记录一下在 ElementPlus 框架下，如何使得多选的 el-select 控件支持实现全选功能。
el-select多个多选的情况下已经选中的不允许再选择
WebZichen的博客
07-23 541
1.重点：给:disabled使用一个函数 （checkDisabled）2.checkDisabled函数体。
Vue3 实现下拉选择框多选的功能实现
weixin_44358678的博客
10-17 9695
vue3+ts+element plus 实现下拉选择框的全选组件的封装
ElementPlus 中el-select自定义指令实现触底加载请求options数据
qq_54548545的博客
08-02 778
ElementPlus 中el-select自定义指令实现触底加载请求options数据/ 不插入body时，以下方式可获取元素// 插入body时，需要以document.querySelector('.el-scrollbar__wrap')获取
elementplus 二次封装 select 自定义指令上拉加载更多 完美解决 多次接口调用 重新加载数据多次调用！！！
最新发布
qq_57952018的博客
08-14 637
elementplus 二次封装 select 自定义指令上拉加载更多 完美解决 多次接口调用 重新加载数据多次调用数据！！！
element-ui使用动态渲染下拉选择框el-select已经选择的下拉框的值不可以重复选择
qq_44552416的博客
03-17 3585
在开发中，我们会遇到动态渲染下拉选择框，每次点新增按钮，列表typeList就会新增一条可以选择的下拉菜单，如果一个下拉菜单选中了其中一个值A，那么新增之后的下拉菜单的A是就不允许再次选中了，需用我们前端禁用掉不允许选中。1，首先把下拉菜单的options拿到，，把里面的每一项新增一个item.disabled=false的属性，这样可以去控制下拉框是否禁用。判断是否有相同的，有的话就把列表数据对应值禁用掉。注：这里两个地方需要用到的，【1，下拉框值改变调用此方法，2，删除对应一项下拉框时候调用此方法】
el-select 不能重复选择
NancyFyn的博客
02-27 869
el-select 不能重复选择，注意：删除后可以再次重新被选择。
multiselect:Vue 3多选组件，具有单选，多选和标记选项
03-30
Vue 3多选 赞助商 其他图书馆 具有多句柄，工具提示合并和格式化的Vue 3滑块组件。 具有标签，自定义插槽和样式选项的Vue 3切换组件。 多选功能 Vue 2和3支持 没有依赖关系 轻量级（压缩后<6> < div> < Multiselect xss=removed xss=removed> </ div> </ template> < script > import Multiselect fr
vue-select 多选下拉列表
09-11
vue-select 多选下拉列表，建议用火狐或者谷歌浏览器打开，低版本IE对vue兼容性不好
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
在使用element-ui开发Web项目时，经常会遇到一些组件使用上的细节问题，其中element-ui中的下拉多选框组件el-select使用时，如何设置默认值且不可删除，是一个较为常见的需求。本文将详细介绍如何解决这个问题，以及...
Element-ui中元素滚动时el-option超出元素区域的问题
10-16
Element-ui的el-select组件通常用于创建一个可选列表，用户可以从中选择一个或多个选项。当el-select的选项列表（el-option）过多，无法在当前视口内完全显示时，会创建一个弹出层（popperEl）来展示这些选项。 ...
Vue3 - Element Plus 下拉选择器 el-select 覆盖修改 placeholder样式，解决覆盖不生效问题（支持修改文字颜色、文字大小、选择器边框、hover效果、宽高等任意样式
王佳斌
03-23 3237
vue3，element-plus，el-select，下拉选择器，下拉选择框，Select选择器，deep覆盖无效怎么办，怎么修改placeholder文字颜色，选择器select修改边框样式，修改文字大小，elementPlus选择器如何覆盖hover效果，使用deep改不了样式，修改边框颜色，select去掉边框，vue3+elementPlus中select选择器如何修改placeholder文字样式，修改el-select样式，select选择器样式覆盖不了咋办，el-select如何覆盖原样式，
Vue3 - Element Plus 选择器 el-select 既可以选择下拉又可以手动输入文本功能，让 select 选择器同时拥有下拉选择和输入文本（支持手动输入文本和下拉选择）
王佳斌
12-02 9247
vue3，element plus，select选择器，el-select，el-select实现可下拉选择和手动输入，element-plus组件库中选择器怎么像输入框一样可以输入，既可以手输也可以选择，el-select可选择可以手动输入，Vue3使用el-select下拉框实现可输入可选择，el-select可新增输入可选择，vue3使用element plus选择器Select既可以下拉选择也可以手动输入，实现el-select可选择/可输入，怎么能让输入框又能选择又能输入文本，既有下拉功能也有输入
vue3 - element-plus组件库el-cascader级联选择器，“动态数据懒加载+回显/编辑时自动选中对应节点“ 问题，多选复选框、单选框级联选择器如何让数据回显？数据是动态加载回显咋办
高级前端工程师
06-28 1784
elementPlus，vue3，element plus el-cascader 回显，级联选择器，回显，懒加载，el-cascader 动态加载选项、编辑时数据回显问题 、单选不加载下一级节点，级联选择器动态懒加载以及回显，解决el-cascader回显失败问题，三级联动数据回显，省市区回显，el-cascader 动态加载，编辑时数据回显，Element-plus Cascader级联选择器动态加载模式下数据回显时的问题，el-cascader列表是动态的怎么回显，赋值后，不回显怎么办，数据还没加载怎
vue3+element-plus+el-tabs+ts+el-menu下展示路由内容的具体代码
04-24
以下是一个基于 Vue3、Element-Plus、TypeScript 的项目的示例代码，用于在页面上显示路由内容： ```html <!-- 在模板中定义一个容器，用于显示选中的 tab 的内容 --> <div class="tab-content"> <router-view></router-view> </div> <!-- 在模板中定义一个 el-tabs，并使用 v-model 绑定选中的 tab ID --> <el-tabs v-model="activeTab"> <!-- 循环渲染所有的路由 --> <template v-for="route in routes"> <!-- 在每个 el-tab-pane 中定义显示的内容 --> <el-tab-pane :key="route.path" :name="route.path"> <router-link :to="route.path">{{ route.meta.title }}</router-link> </el-tab-pane> </template> </el-tabs> ``` ```ts import { defineComponent, computed } from 'vue' import { useRoute, useRouter } from 'vue-router' import { ElMenu, ElMenuItem } from 'element-plus' export default defineComponent({ setup() { const router = useRouter() const route = useRoute() // 定义路由数据 const routes = computed(() => router.getRoutes().filter(route => route.meta?.title)) // 定义选中的 tab ID，初始值为当前路由的路径 const activeTab = computed(() => route.path) return { routes, activeTab, } }, }) ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值