Vue2 解决需求：el-select多选框中限制一种类型仅可选择一种设备

最新推荐文章于 2023-10-17 15:42:24 发布
最新推荐文章于 2023-10-17 15:42:24 发布
阅读量561 收藏
点赞数
分类专栏： Vue常见问题 文章标签： javascript vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/news777/article/details/126244472
版权

需求

  • 组件：element-ui 2.15.7 select组件多选框
  • 需求：下拉框中多种选项，但限制每个设备类型只能选择一种设备

图示

  • 未经限制
    在这里插入图片描述
  • 监听选择加限制
    在这里插入图片描述

代码

<template>
  <div id="app">
    <el-select
      v-model="value1"
了解本专栏 订阅专栏 解锁全文 超级会员免费看
News777
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
主要介绍了解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue: 多个el-select不能重复选择相同属性
最新发布
02-22
当我们在项目中遇到“多个el-select不能重复选择相同属性”的问题时，这意味着我们可能需要实现一种机制来确保不同select组件之间的选项值不发生冲突，即用户不能在多个select中选择相同的值。以下是对这个问题的...
element-ui下拉多选框 el-select 时，有且至少有一个tag标签（多个tag可任意删除，一个不可删除）
zhangzhenyan19930312的博客
04-22 5123
需求：只有一个tag 时，不可删除；且options 不可选择 / 取消 最终效果展示： 解决思路： （1）watch 进行监听select绑定value，判断长度； （2）添加样式到el-tag__closetag中，把icon 删除按钮“x” 设置 display:none;隐藏，造成视觉上不可删除的效果； （3）同时将option的disabled属性加上，为了和（2）同步效果； 试了很多方法，刚开始用的watch监听长度变化，但是默认一个值的时候效果不太好，后来用了下面这个方..
Vue 多选下拉框值每组名字的只能选一个
weixin_43872691的博客
10-17 395
Vue 多选下拉框值每组名字的只能选一个
elementUI中el-select可选全部/多选/单选(最少选一个)
Sleeping_Fairy的博客
10-20 5948
elementUI中el-select可选全部/多选/单选(最少选一个)
vue+ElementUI ：多个选择器（el-select），公用一套选项，且每个选项只能被选中一次
LeeBingNing的博客
11-21 2658
vue+ElementUI 多个选择器（el-select），公用一套选项，且每个选项只能被选中一次
el-select下拉选择器“多选”对选择的数量进行限制
zyxczyf123的博客
03-18 8265
el-select选择器在多选的时候我们希望对选择的数量进行一些限制，比如对多可以选择两个，就需要在选择大于两个的时候，让多选的数据提交不上去，并且给客户进行提示 思想:通过change事件获取下拉选择器的数据变化，并且进行判断，在数组长度大于2的时候，我们吧select双向绑定的数据进行裁剪，去掉最后一位 //bindPeople绑定的数据 <el-select v-model="bindPeople" multiple style="width:220px" @change="bindChan
el-select 自定义创建条目时，只能选择一个或者输入一个
csdnyp的博客
08-25 3905
如图所示 当选择甲方时，甲方代表只能选择一个，且不能自行输入； 当甲方代表没有人员可以选择时，可以自行输入创建一个人员 代码 <el-form-item label="甲方" prop="partyAName"> <el-select v-model="AddContractForm.partyAName" @change="customerCompanyChangeA" placeholder="请选择甲方公司" clearable>
vue:el-input输入时限制输入的类型操作
10-15
主要介绍了vue:el-input输入时限制输入的类型操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-select2:Vue中的select2组件
05-05
Vue-Select2-Component基于以下插件和libs（version）： 如何使用 安装 // npm install npm install v-select2-component --save 用作组件 导入为全局组件。 // import Select2Component import Select2 from 'v-...
element ui select 组选择器只能选择一个
zy991315的博客
09-02 1397
element ui select 组选择器只能选择一个
element-ui表格中复选框只能选中一个
weixin_47163986的博客
03-14 1666
element-ui表格中复选框只能选中一个 <el-table ref="multipleTable" :data="updatetableData" @select="select" @select-all="selectAll" > <el-table-column type="selection"></el-table-column>
el-table selection复选框只选择一个
weixin_43927116的博客
07-22 2014
首先在 el-table 标签上添加, ref=“tableInfo” @select=“selectRow” @select-all=“selectAll” 再在 methods 中添加以下方法 select(selection, row) { // 选择项大于1时 if (selection.length > 1) { let del_row = selection.shift(); this.$refs.tableInfo.toggleRowSelection(del_row, false);
el-select 选项只能被选一次
NancyFyn的博客
12-05 1026
el-select 选项只能被选一次
el-select下拉框重复选择
coral_150的博客
10-11 2556
在用element做下拉框的时候，有时候要对多个下拉框的选择做出限制，例如一个下拉选了，另一个就不能重复选定。这里提供两种方法如下：
如何在excel中创建二级菜单，即选择一个类型后，下一单元格可以选择其子类型
居贝比的博客
07-06 5925
1、在sheet1 中，选中所有数据，进入 公式 - 定义的名称 - 根据所选内容创建 ，在对话框中将「最左列」前面方框里的勾取消掉，只保留「首行」前面的勾。 2、进入sheet2 ，选中单元格A1，进入 数据 - 数据工具 - 数据验证 ，在 允许 中选择 序列 3、点击来源，然后切换到之前准备好的sheet1中，只选择第一行也就是一级标题，回车然后点击确定 4、选中B1单元格，进入 数据 - 数据工具 - 数据验证 ，在 允许 中选择 序列 ，在来源中输入
el-select最多选择两个
weixin_35756690的博客
02-16 2529
el-select 是一个基于 Element UI 的下拉选择组件，如果需要限制 el-select 最多只能选择两个选项，可以使用该组件提供的 multiple 和 limit 属性来实现。 具体来说，需要将 multiple 属性设置为 true，并将 limit 属性设置为 2，这样 el-select 就能够允许选择多个选项，并且最多只能选择两个选项。 以下是一个简单的示例代码： &lt...
elementui的select同一个选项连续点击时能连续选中，触发change事件;elementui的el-select中的点击事件native
Sunny_lxm的博客
04-12 4839
下拉菜单，我需要实现连续插入同一个选项（这里我在项目找那个用的是字符串拼接），实现连续点击某一个选项能连续插入到下面的文本框中。这样就不能使用v-model，改用:value；change事件改用成options的点击事件 这样在连续点击同一个时候也能触发change事件了 <template> <div> <h4>临时文件&l...
element select选择器，同一选项如何多次选择？
DL_min的博客
08-23 1261
  如图，我想多次选择黄金糕，代码该如何写呢？
vue中el-select多选框表单提交
08-30
在Vue中，可以使用`el-select`组件实现多选框表单提交。以下是一个基本的示例： ```vue <el-select v-model="selectedOptions" multiple placeholder="请选择" style="width: 200px" > <el-option v-for...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

News777

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

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

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

打赏作者

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

抵扣说明：

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

余额充值