iview中Select 选择器多选校验

最新推荐文章于 2025-06-10 14:54:33 发布
原创 最新推荐文章于 2025-06-10 14:54:33 发布 · 8.9k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #iview #validator

本文介绍iview UI库中的Select组件如何启用多选模式，并详细阐述了如何利用async-validator进行数组类型的有效性校验。包括设置验证规则以确保选择项符合预期的业务需求。

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

iview提供的select组件中使用multiple属性可以开启多选模式,返回的数据也是数组的形式。

iview使用的校验是根据async-validator来实现数据验证。验证规则可前去查看开源项目

多选模式下的select组件校验使用type为array,可设置len属性来规定数组的长度，设置len:1则不是数组长度为1则通过校验，不设置则数组有元素则通过校验。

{ type: 'array', required: true, message: '不能为空'}

正则可以写在data中


在rules中引用即可



vue-iview 多选框Checkbox和 v-show 根据真假响应式来显示元素和隐藏
qq_33164351的博客
09-14 791
多选框Checkbox和 v-show 根据真假响应式来显示元素和隐藏 原理： v-show指令的原理是修改元素的的CSS属性(display)来决定实现显示还是隐藏 代码： <Checkbox-group v-model="formData[item.name]" @on-change="changeBox"> <Checkbox :label="item.displayName.zh">用户认证</Checkbox> </Checkbox-group>
解决 iView Select 选中后验证失败的问题
qq_41524691的博客
07-15 1415
问题描述：使用iView的Select组件配合Form进行验证的时候，总是验证不通过 看了网上的建议，添加type: 'number’还是不起作用，查看iView的验证规则文档后发现 iView rules文档 即如果我们不添加type来限定类型，则默认类型就是 string，但是一般的需求是Option的value都是id这种唯一标识。 所以有可能会出现number/string，之前拿到后台的数据时，id默认是string，然后不添加type，只是常规的required、message、trigge
iview-select-tree:基于iview进行二次开发的级联树状选择组件，支持无限级，单选，多选，搜索，表单验证（注：使用前先约会iview，否则无法使用）
03-26
iview选择树 基于iview进行二次开发的级联树状选择组件，支持无限级，单选，多选，搜索，表单验证（注：使用前先约会iview，否则无法使用） 安装 npm install iview - tree - select -- save ♡ import selectTree from 'iview-select-tree' 在约会的vue模块中需要在组件上注册这个组件，这样才可以正常使用这个组件： export default { name : 'app' , components : { selectTree } , data ( ) { return { ... } } , ... } 效果 多选效果 单选效果 表单验证效果 调用方式 < selectTree v-model = "val" : treeDat
ivew怎么实现table的多选框选择根据条件禁用.全选也只能选中没有被禁用状态的行
最新发布
肖肖肖丽珠的博客
06-10 524
value: row._checked, // 绑定选中状态（需自行维护）: item.ordersClassCode == 1 // 动态禁用。// 拦截事件：只有非禁用的行才能触发选中。// 更新行的 _checked 状态（可选）// 处理全选/反选（需过滤禁用行）//获取tableData的数据。// 手动控制行选中状态。
iview表格自定义多选框
liyanghao809433131的博客
09-27 5700
列中定义： { title: '是否短信通知', key: 'isSmsnotify', render: (h, params) =&gt; { return h( 'div', this.$refs.myTable.$scopedSlots.smsnotifyCheckAction({ id: params.row.id }) ) ...
web学习之js写计算器
2401_84435866的博客
04-27 1042
off_on {p,h1 {font-family: 楷体;
iview 表格多选框根据数据 默认选中
Mr_zrh的博客
10-16 1493
<template> <Table border ref="selection" :columns="columns4" :data="data1"></Table> </template> <script> export default { name: "WorkspaceJsonApp", data() { return { columns4: [ { type: "sel
iview中Select 选择器多选校验方法
08-27
iView 中 Select 选择器多选校验方法 iView 是一个基于 Vue.js 的高质量 UI 组件库，它提供了许多实用的组件来帮助开发者快速构建应用程序。其中，Select 选择器是一个非常常用的组件，它可以帮助用户从多个选项中...
浅谈关于iview表单验证的问题
10-17
iview表单验证中的问题主要涉及到select选择器的验证问题以及时间日期格式的验证问题。在select选择器的场景中，iview默认将数据类型校验为字符串，如果使用number类型作为select的value值，就可能出现校验不通过的...
iview 的 时间date-picker 为 datetimerange 和Select为value=“ “ 的验证问题
qq_33164351的博客
08-10 620
1.iview的 Select下拉框的时候,数据验证必填,选择了数据,却一直提示验证不能通过 <Form :model="formData" ref="formValidate" :rules="ruleValidate" <FormItem label="请选择类型" prop="depttype" label-position="top"> <Select v-model="formData.depttype" value="formData.depttype"&g
iview里面的select可以多选，同时动态显示你选了几条数据
IT博客技术分享
05-11 6610
先上效果图： 分析： 要想让上面的显示，下面的select的选中几条的数据，只需要把下面的selcet加一个on-change事件绑定就可以。 然后判断里面的length 的长度，就是你需要的结果； @on-change="get_num" get_num(data){ console.log("data",data); ...
详解iview的checkbox多选框全选时校验问题
10-16
主要介绍了详解iview的checkbox多选框全选时校验问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
iview Vue多级菜单的联动
sinat_31736111的博客
08-19 668
用最笨的方式写了一个三级菜单的联动 <template> <div> <Select v-model="whereMap.model1" style="width:200px" @on-change="getSecond"> <Option v-for="item in list1" :value="item.id" :key="i
iview中checkbox多选框带实际值和显示值的写法
帅的博客
07-07 309
iview中checkbox多选框带实际值和显示值的写法
iview select 使用了多选multiple @on-change 方法会自动触发
不积跬步何以至千里
10-21 4168
今天也是神奇 遇到一个打着灯笼也找不到的bug 因为我是添加编辑共用同一个弹出框 然后今天做编辑的时候 发现 明明region后端字段获取到了 但页面鬼斧神差的不显示 如下图 console.log都打印出来东西 就是不上页面 value的值也是对的 然后就很无奈 能怎么办 这时候就查找整个页面里 有存储区域的字段 发现有个地方我把他清空了 我把这句话屏蔽 居然又显示了 但 这是on-ch...
iview tree树形控件多选,自定义内容
我的代码没有bug的博客
06-29 2155
iview tree树形控件多选,自定义内容
VUE 使用IView 中的Select进行分组（OptionGroup）展示，允许多选情况下，组内元素不能多选功能
gavinoldmen的专栏
04-27 2009
VUE 使用IView 中的Select进行分组（OptionGroup）展示，允许多选情况下组内元素不能多选功能只允许单选功能实现； 实现思路：根据on-select 和on-change返回值不同，并且on-select的返回优先于on-change的返回时间的原理，得到本次选中的元素和本次返回的结果。 ...
iview爬坑之旅——select分组（optionGroup）展示，允许多选情况下，组内元素只能单选
一个女胖子的博客
08-23 1371
需求描述：下拉选框select支持分组（OptionGroup）多选，组内元素只能选择一个，（组外元素支持多选，组内元素支持单选，不支持多选）； 解决方案 根据on-select 和on-change返回值不同，并且on-select的返回优先于on-change的返回时间的原理，得到本次选中的元素和本次返回的结果。在根据当前选中的id找到当前元素的兄弟元素，将除自己的兄弟元素从选中的集合中删除，从而达到组内单选的效果； <Select v-model="runGroupTagList" style=
iview select 多选怎么清空
05-25
要清空 iView Select 组件的多选，可以通过以下两种方式实现： 1. 代码方式： 可以通过给 Select 组件的 v-model 绑定一个空数组来清空多选： ```html <template> <Select v-model="selectedOptions" mode="multiple"> <!-- options --> </Select> <Button type="primary" @click="clearSelectedOptions">清空</Button> </template> <script> export default { data() { return { selectedOptions: [] } }, methods: { clearSelectedOptions() { this.selectedOptions = [] } } } </script> ``` 2. UI 操作方式： 点击 Select 组件右侧的清空按钮可以清空多选。 ```html <template> <Select v-model="selectedOptions" mode="multiple" clearable> <!-- options --> </Select> </template> <script> export default { data() { return { selectedOptions: [] } } } </script> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值