多个 el-select 下拉框调用同一个数组时，下拉框的值不能重复

已于 2023-08-13 14:05:49 修改
阅读量711 收藏 2
点赞数 1
文章标签： 前端 vue.js
于 2023-08-12 19:24:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71835253/article/details/132251760
版权

实现的效果

多个下拉框，每个下拉框选中的值不能重复，选过的下拉值会被过滤

共用一个接口  realUserList  ,  里面是部门的人

四个下拉框必选，数据结构如下

 我使用的方法是计算属性完成,  我是从vuex 里面的获取的数据( userList ),   原理就是利用 v-model的 响应式数据, 把选择之后的数据放在数组里面, 然后进行遍历 , 过滤 , 然后 让el-option

绑定的数据为过滤之后的数据

沙尘暴炒饭
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
vue+ElementUI ：多个选择器（el-select），公用一套选项，且每个选项只能被选中一次
LeeBingNing的博客
11-21 2658
vue+ElementUI 多个选择器（el-select），公用一套选项，且每个选项只能被选中一次
el-select下拉选项的数据源分别是数组或对象时v-for遍历的用法
LewisRoc的博客
01-29 1万+
在使用element ui 中的 el-select选择器组件时，通常我们会使用v-for遍历数据作为选择器的 下拉选项赋值，通常遍历的数据为数组，但有时后端返回我们的数据是对象的话也是可以用来 充当下拉选项的数据源的。 element 官网中的例子是遍历的数组：如下 <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.valu
多个el-select下拉框互斥选择
baidu_38492843的博客
06-07 1059
多个el-select下拉框互斥选择
vue关于多个下拉框调用同一个数组时，下拉框的值不能重复
qq_36765732的博客
04-23 6813
五个下拉框，每个下拉框选中的值不能重复，选过的下拉值会置灰，代码如下 五个下拉框必选，数据结构如下 重点是计算与监听相关的属性 下面是封装的方法 // 此为多个下拉框调用同一个数组时,不能选同一个id的值,如果是id则dbSourceId改为'id',dataArray为当前下拉框的数组 export function getdiabledSelect (val, old...
两个类名一样的select下拉框 如何让他们不能选择同样的值？？
qq_25543685的博客
09-07 3274
两个类名一样的select下拉框  如何让他们不能选择同样的值？？ (2014-06-08 10:46:31)转载▼ 标签： 体育 分类： js技巧 比如两个select下拉框都有class=‘ceshi’, 操作如下： $('.ceshi').change(function(){        if($('.ceshi[value='+$(this).val()+']').length
el的select下拉框对应的列表切换数据
花椒和蕊的博客
03-31 2407
element的select下拉框选择之后，对应的列表上数据对应的切换。 写的是假数据，还没有调接口处理。后续调完接口会回来补上代码 效果： 因为左边的图标是不变的，所以只处理了右侧的数据 代码： ```bash <div class="rTop"> <div style="width: 100%"> <h3 class="eqName" style="float: left">设备名称</h3>
在element-ui的select下拉框加上滚动加载
10-17
总的来说，通过创建自定义Vue指令并结合Element-UI的`<el-select>`组件，我们可以实现一个滚动加载功能，使得在处理大量数据时能有更好的性能和交互体验。这种方法不仅适用于`<el-select>`，也可以应用到其他需要...
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
- `remoteMethod(query)`方法被`:remote-method`绑定，当用户输入时调用，它触发一个自定义事件`remoteMethod`，将查询字符串传递给父组件处理。 - `changeSelect(item)`、`handleClear`、`handleBlur`、`...
浅谈Vue Element中Select下拉框选取值的问题
12-29
一个原生的select的，因为展示效果原因，给删除掉了，忘记保存代码了，现在大家展示使用elementUI的下拉框封装一个组件，供咱们项目中经常调用，减少代码量。 html： <el v-model=ite placeholder=请选择 value-key...
vue.js 解决v-model让select默认选中不生效的问题
11-20
在描述中提到，开发者遇到了一个奇怪的现象：`select`下拉框的`v-model`不能正常工作，即不能根据预设的值自动选中相应的选项，但其他`input`框的数据却能正常显示。开发者尝试了更换Vue.js版本、检查变量名、验证...
Select下拉框模糊查询功能实现代码
09-01
函数遍历下拉框（`selectBox`）的所有选项，如果选项的文本以输入字符开头，就创建一个新的`div`元素并添加到消息区域（`msg`），同时为这些`div`元素添加鼠标悬停和点击事件，以便在用户选择时更新下拉框的值。...
Vue 循环el-select 并且不能重复选择相同数据
m0_63701303的博客
11-08 695
Vue 循环el-select 并且不能重复选择相同数据
elementui遇到的坑，记录一下
weixin_48282959的博客
11-15 102
【代码】elementui el-select需要取数组内所有值。
vue 实现关于多个select框下拉选值不能重复的问题
m0_59760183的博客
08-06 1805
记录一下，怕自己忘记了~话不多说直接贴图 页面代码： 计算属性代码： ==有更好的解决方法或者啥问题请多指教哈~ ...
vue+element框架 el-select分组展示，允许多选情况下，组内元素只能单选,并且两个下拉框同一个组选过的项禁选
weixin_39948052的博客
04-07 2878
el-select分组展示，允许多选情况下，组内元素只能单选,并且两个下拉框同一个组选过的项禁选
详细分析Element中的el-select（附代码）
码农研究僧的博客
02-29 7070
el-select 是 Element UI 中的一个选择器组件，用于提供下拉框选择功能
element-ui同时获取el-select选中对象中的多个属性值
热门推荐
E_li_na的博客
08-14 2万+
&amp;amp;lt;el-form-item label=&amp;quot;用户角色:&amp;quot; prop=&amp;quot;userRoleId&amp;quot;&amp;amp;gt; &amp;amp;lt;el-select v-model=&amp;quot;form.userRoleId&amp;quot; placeholder=&amp;quot;-请选择-&amp;
el-select 选择对象 value-key属性
wu_yans的博客
07-20 1万+
今天遇到一个使用el-select的时候，需要获取值为对象，使用Select 组件的绑定值是一个数组，但是数组的值只能传入 Number 类型或者 String 类型的数据，如果我们想向其中传入一个对象就会出错。 怎么办呢？ 我们可以发现是缺少一个索引，查看了elemnet-ui 的文档，可以看到 Select 组件有一个属性：value-key 那么下面我们来试试用一下这个属性： <el-select v-model="test" value-key="id" @change="changeVa
elementUI select控件绑定多个值（对象）
A873054267的博客
07-17 1万+
通常使用的时候v-model都是绑定一个值，这样没有问题，但在某些需求中会获取选择项的多个值。 那么v-model就需要绑定一个对象，e饿了么的官网说明了绑定对象的时候必须绑定value-key值，否则会出现选择项无法改变的情况 。value-key可以使用选择项中的值。 当时没有看文档的时候，自己也想了一个办法，就是绑定选择项的索引值，然后到对应的nameList数组中取出对应的项也可以。...
网站基本布局CSS
最新发布
m0_46608027的博客
07-24 705
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沙尘暴炒饭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值