antd select multiple selection limit
Give the source code directly
<template>
<a-select
v-model="college"
mode="multiple"
:maxTagCount="2"
autocomplete="off"
style="width: 252px;margin-top:10px;margin-right: 28px"
:getPopupContainer="triggerNode => "
>
<a-select-option
v-for="item in collegeList"
:key=""
:value=""
:disabled=" >= 5 && (o => o === ) === -1"
>
{{ }}
</a-select-option>
</a-select>
</template>
<script>
data() {
return {
collegeList: [],
college: []
}
},
</script> The core code is disabled
where collegeList data structure
[
{
"city": "Beijing",
"code": "4111010001",
"createBy": null,
"createTime": null,
"department": "Ministry of Education",
"id": 1,
"level": "Undergraduate",
"name": "Beijing University",
"updateBy": null,
"updateTime": null
},
{
"city": "Beijing",
"code": "4111010002",
"createBy": null,
"createTime": null,
"department": "Ministry of Education",
"id": 2,
"level": "Undergraduate",
"name": "Renmin University of China",
"updateBy": null,
"updateTime": null
},
{
"city": "Beijing",
"code": "4111010003",
"createBy": null,
"createTime": null,
"department": "Ministry of Education",
"id": 3,
"level": "Undergraduate",
"name": "Tsinghua University",
"updateBy": null,
"updateTime": null
}
]
Let’s take a look at a more complicated example:
<a-select
v-model="safeGroup"
mode="multiple"
placeholder="Please select a security group"
class="long-input"
:getPopupContainer="triggerNode => "
@change="handleSafeChange"
>
<a-select-option
v-for="item in SafeGroupList"
:key=""
:value="(item)"
:disabled="
>= 5 &&
(o => (o).safeGroupId === ) === -1
"
>
<ellipsis :length="20"> {{ }}</ellipsis>
</a-select-option>
</a-select>The data processing of v-model binding is in the @chang method
handleSafeChange(e) {
if (e) {
= false
= e
const arr1 = (x => {
return (x)
})
const arr2 = (x => {
return (x).safeGroupId
})
this.$emit('handleSafeChange', arr2, arr1)
}
},About antd Select Solution to limit the number of selections
Application scenario description:
Select is wrapped in form and modified by getFieldDecorator. Therefore, the change of the value should be done through the form setFieldsValue method.
Select mode will definitely be multiple. And take up to three values as an example.
The solution is as follows:
1 At first I wanted to determine the number of values in the Select onchange event. When the number is greater than three, I will resetFieldsValue; and replace the last option value with the value I just selected.
Later I found that the setFieldsValue method does not work, and the value of Select will continue to increase. Later I thought that it might be that setFieldsValue conflicts with onchange, and the value after onchange cannot be changed through setFieldsValue.
2 Finally, by revisiting the document. Another method is found to be available, namely validator. Verify the value, verify whether the number of selected values is greater than three, and then setFieldsValue again; find this method feasible. This will solve this difficult and complicated disease.
OK, finally, the code is attached for reference:
changeValues = (rule ,value , callback)=> {
const { setFieldsValue } = ;
let newArr ;
if ( > 3){
newArr = [].concat((0,2), (-1) ) ;
setFieldsValue({
"languages" : newArr ,
})
callback(‘Choose up to three languages‘)
} else {
newArr = value ;
callback()
}
}
{getFieldDecorator(‘languages‘, {
rules:[{required: true,message : ‘Please select three languages‘,
validator : changeValues
}],
validateTrigger : ‘onChange‘,
})(
1
2
3
4
5
)}
This is the end of this article about antd select and multiple-choice limits. For more related antd select and limits, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!