(vue)el-select下拉选择器“多选”对选择的数量进行限制

最新推荐文章于 2024-02-29 08:30:36 发布
最新推荐文章于 2024-02-29 08:30:36 发布
阅读量1.7k 收藏 1
点赞数 1
分类专栏： VUE 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44754635/article/details/133789145
版权

(vue)el-select下拉选择器“多选”对选择的数量进行限制

效果:
在这里插入图片描述

方法：通过设置属性 multiple 和 :multiple-limit

<el-select 
  v-model="value1"
  multiple
  :multiple-limit="2"
  placeholder="请选择" 
  ...
>
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
  ></el-option>
</el-select>
nyf_unknown
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-select-tree:ElementUI的el-select与el-tree结合
05-07
精选树 ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-select-tree/lib/element-ui' ; 全球注册 import Vue from 'vue' ; import ElSelectTree from 'el-select-tree' ; Vue . use ( ElSelectTree ) ; 组件内注册 import ElSelectTree from 'el-select-tree' ; export default { components : { ElSelectTree } } ; 完
vue-select 多选下拉列表
09-11
vue-select 多选下拉列表，建议用火狐或者谷歌浏览器打开，低版本IE对vue兼容性不好
巧妙解决element-ui下拉框选项过多的问题
weixin_30824599的博客
07-30 5242
1. 场景描述 不知道你有没有这样的经历，下拉框的选项很多，上万个选项甚至更多，这个时候如果全部把数据放到下拉框中渲染出来，浏览器会卡死，体验会特别不好 用人会说element-ui的select有一个remote-method，支持远程搜索，我们让服务端支持一下不就可以了，当然这是一种解决的方案。但是有时候这种方法有时候不一定适用 （1）有时候服务端数据是经过计算返回给我们的...
el-select最多选择两个
weixin_35756690的博客
02-16 2359
el-select 是一个基于 Element UI 的下拉选择组件，如果需要限制 el-select 最多只能选择两个选项，可以使用该组件提供的 multiple 和 limit 属性来实现。 具体来说，需要将 multiple 属性设置为 true，并将 limit 属性设置为 2，这样 el-select 就能够允许选择多个选项，并且最多只能选择两个选项。 以下是一个简单的示例代码： &lt...
Vue vant封装实现Select效果--单选和多选
最新发布
不抛弃、不放弃：Aaron莫言
02-29 950
vue项目无论是用element中的Select选择器，还是使用公司维护的组件，都可以轻松实现单选和多选的需求，但在移动端使用vant时，找了几遍发现居然没有提供Select组件，下面提供对单选和多选组件的封装。③orderClassify是后台返回的数据，{label:'configName', value:'configCode'} 对应选项的key-value，可以参考下面后台返回的数据。①使用到该组件的页面导入多选组件，和单选组件的导入一致，参考上面。①使用到该组件的页面导入单选组件。
Element-ui中元素滚动时el-option超出元素区域的问题
10-16
主要介绍了Element-ui中元素滚动时el-option超出元素区域的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue Element 分组+多选+可搜索Select选择器实现示例
10-18
主要介绍了Vue Element 分组+多选+可搜索Select选择器实现示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
全局指令-element-ui 下拉框无限下拉实现
weixin_45101949的博客
08-31 775
准备好一个全局指令 import Vue from 'vue'; let MyPlugin = {}; // 定义全局指令 export default MyPlugin.install = function (vue, options) { // loadmore 是定义的指令 名称 ， 使用时 用 v-loadmore = "dosomethingFun or data" Vue.directive('loadmore', { // bind只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次
el-select 自定义创建条目时，只能选择一个或者输入一个
csdnyp的博客
08-25 3820
如图所示 当选择甲方时，甲方代表只能选择一个，且不能自行输入； 当甲方代表没有人员可以选择时，可以自行输入创建一个人员 代码 <el-form-item label="甲方" prop="partyAName"> <el-select v-model="AddContractForm.partyAName" @change="customerCompanyChangeA" placeholder="请选择甲方公司" clearable>
el-select控制单选还是多选
懒虫的博客
08-14 1498
el-select控制单选还是多选
el-select下拉选择器“多选”对选择的数量进行限制
zyxczyf123的博客
03-18 8125
el-select选择器在多选的时候我们希望对选择的数量进行一些限制，比如对多可以选择两个，就需要在选择大于两个的时候，让多选的数据提交不上去，并且给客户进行提示 思想:通过change事件获取下拉选择器的数据变化，并且进行判断，在数组长度大于2的时候，我们吧select双向绑定的数据进行裁剪，去掉最后一位 //bindPeople绑定的数据 <el-select v-model="bindPeople" multiple style="width:220px" @change="bindChan
el-select 下拉框多选实现全选的实现
10-16
主要介绍了el-select 下拉框多选实现全选的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
主要介绍了解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
主要介绍了Vue + Element-ui的下拉框el-select获取额外参数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解element-ui中el-select的默认选择项问题
10-16
主要介绍了详解element-ui中el-select的默认选择项问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-select 下拉框多选实现全选
热门推荐
小小迎的博客
10-23 2万+
在写一个功能时发现el-select支持多选，但是竟然不支持全选，好无语哦，那就自己实现一下吧~有两种方法，第二种感觉简单些 方法一：下拉项增加一个【全选】，然后应该有以下几种情况： 1.下拉选项全都勾选时，【全选】自动勾选； 2.下拉选项部分勾选时，点击【全选】后，所有下拉项全部勾选； 3.下拉选项全都未勾选时，点击【全选】后，所有下拉选项不勾选； 4.下拉选项和【全选】都选上的时候，不勾选任意...
element-ui的table表格多选限制个数，隐藏全选按钮
Ccuurree的博客
08-03 855
【代码】element-ui的table表格多选限制个数，隐藏全选按钮。
el-select数据过多的解决（纯前端）
weixin_41897680的博客
09-05 3979
el-select数据过多的解决（纯前端）
vue 下拉选择器el-select _Vue 2的下拉时间选择器 半小时小时分中
05-17
您可以使用 element-ui 中的 el-time-select 组件实现此功能。可以设置 step 属性来控制时间间隔，例如： ```html <el-time-select v-model="time" :picker-options="{start: '00:00', step: '00:30', end: '23:59'}" placeholder="选择时间"> </el-time-select> ``` 在上面的代码中，我们设置了 step 为 '00:30'，表示时间间隔为 30 分钟。您可以根据自己的需求进行调整。 注意：el-time-select 组件只能选择时间，如果您需要同时选择日期和时间，可以考虑使用 el-date-picker 和 el-time-picker 组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值