antd select 多选限制个数的实现代码
更新时间：2022年11月09日 11:30:47 作者：一晌贪欢i
这篇文章主要介绍了antd select 多选限制个数,实现思路和核心代码都很简单，其中核心代码在于disabled，代码简单易懂需要的朋友可以参考下
antd select 多选限制个数
直接给出源码
<template>
<a-select
v-model="college"
mode="multiple"
:maxTagCount="2"
autocomplete="off"
style="width: 252px;margin-top:10px;margin-right: 28px"
:getPopupContainer="triggerNode => triggerNode.parentNode"
>
<a-select-option
v-for="item in collegeList"
:key="item.id"
:value="item.name"
:disabled="college.length >= 5 && college.findIndex(o => o === item.name) === -1"
>
{{ item.name }}
</a-select-option>
</a-select>
</template>
<script>
data() {
return {
collegeList: [],
college: []
}
},
</script> 其中核心代码在于disabled
其中 collegeList数据结构
[
{
"city": "北京市",
"code": "4111010001",
"createBy": null,
"createTime": null,
"department": "教育部",
"id": 1,
"level": "本科",
"name": "北京大学",
"updateBy": null,
"updateTime": null
},
{
"city": "北京市",
"code": "4111010002",
"createBy": null,
"createTime": null,
"department": "教育部",
"id": 2,
"level": "本科",
"name": "中国人民大学",
"updateBy": null,
"updateTime": null
},
{
"city": "北京市",
"code": "4111010003",
"createBy": null,
"createTime": null,
"department": "教育部",
"id": 3,
"level": "本科",
"name": "清华大学",
"updateBy": null,
"updateTime": null
}
]
再看一个复杂一点的例子：
<a-select
v-model="safeGroup"
mode="multiple"
placeholder="请选择安全组"
class="long-input"
:getPopupContainer="triggerNode => triggerNode.parentNode"
@change="handleSafeChange"
>
<a-select-option
v-for="item in SafeGroupList"
:key="item.safeGroupId"
:value="JSON.stringify(item)"
:disabled="
safeGroup.length >= 5 &&
safeGroup.findIndex(o => JSON.parse(o).safeGroupId === item.safeGroupId) === -1
"
>
<ellipsis :length="20"> {{ item.safeGroupName }}</ellipsis>
</a-select-option>
</a-select>其中对v-model绑定的数据处理在@chang方法里
handleSafeChange(e) {
if (e) {
this.dispalySafe = false
this.safeGroup = e
const arr1 = e.map(x => {
return JSON.parse(x)
})
const arr2 = e.map(x => {
return JSON.parse(x).safeGroupId
})
this.$emit('handleSafeChange', arr2, arr1)
}
},关于antd Select 限制选择个数的解决方案
应用场景描述：
Select 被form 所包裹，且被getFieldDecorator修饰。所以值的改变应该通过form的setFieldsValue方法。
Select模式肯定会是multiple。且以最多三个值举例。
解决思路如下：
1 起初是想在Select的onchange事件中判断values的数量，数量大于三个的时候来重新setFieldsValue；且把最后的选项值替换成刚刚选择的值。
后来发现setFieldsValue方法不起作用，Select的值会一直增加。后来想想可能是 setFieldsValue与onchange 冲突，通过setFieldsValue 无法改变onchange后的值。
2 最后通过重新查看文档。发现还有一个方法可用，即 validator。验证值，通过验证所选值的数量是否大于三个，然后重新setFieldsValue ；发现此法可行。从而解决该疑难杂症。
好，最后附上代码供参考：
changeValues = (rule ,value , callback)=> {
const { setFieldsValue } = this.props.form ;
let newArr ;
if (value.length > 3){
newArr = [].concat(value.slice(0,2), value.slice(-1) ) ;
setFieldsValue({
"languages" : newArr ,
})
callback(‘最多选择三种语言‘)
} else {
newArr = value ;
callback()
}
}
{getFieldDecorator(‘languages‘, {
rules:[{required: true,message : ‘请选择三种语言‘,
validator : changeValues
}],
validateTrigger : ‘onChange‘,
})(
1
2
3
4
5
)}
到此这篇关于antd select 多选限制个数的文章就介绍到这了,更多相关antd select 限制个数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在 Vue.js 中，父子组件通信是非常重要的，在本文中，我们讨论了 Vue.js 中父子组件通信的几种方式，包括使用 props 传递数据、使用 Sync 修饰符实现双向绑定、使用自定义事件传递数据、使用 $refs 访问子组件实例以及使用 $children 和 $parent 访问父子组件实例2023-09-09
vue是目前非常流行的前端开发框架,随着技术的不断更新,我们也需要更新我们的vue项目,这篇文章主要给大家介绍了关于vue项目如何删除无用的依赖的相关资料,需要的朋友可以参考下2024-09-09
使用强大的Vuetify开发前端页面,结果发现官方没有提供简便的全局消息通知组件,所以自己动手写了一个简单的组件,接下来通过本文给大家介绍使用vuetify实现全局v-alert消息通知的详细代码,感兴趣的朋友跟随小编一起看看吧2024-02-02
这篇文章主要介绍了vue如何实现文件上传及预览问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了Vue2 轮播图slide组件实例代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-05-05
作为一个前端初学者,公司项目中前端需要一个进度条,所以下面这篇文章主要给大家介绍了关于Vue如何实现简单的时间轴与时间进度条的相关资料,需要的朋友可以参考下2022-09-09
快速解决electron-builder打包时下载依赖慢的问题
使用 Electron-builder 打包,有时会在下载Electron、nsis、winCodeSign的过程中 Timeout 导致打包失败,本文给大家分享快速解决electron-builder打包时下载依赖慢的问题,感兴趣的朋友一起看看吧2024-02-02
在Vue中实现导出Excel有多种方式,可以通过前端实现,也可以通过前后端配合实现,这篇文章将为大家详细介绍几种常用的实现方式,需要的可以参考下2023-08-08
这篇文章主要介绍了Vue如何使用CSS自定义变量，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-05-05
使用webpack-obfuscator进行代码混淆及报错解决过程
随着前端应用的复杂度增加,保护客户端的JavaScript代码变得更为重要,webpack-obfuscator插件通过对代码进行混淆,如变量重命名、字符串加密等,提高代码的保密性,防止源码被轻易查看或修改2024-10-10
最新评论