antd select 多選限制個數的實現代碼
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 限制個數內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Ant Design of Vue select框獲取key和name的問題
- 解決Antd中Form表單的onChange事件中執行setFieldsValue不生效
- Vue設置select下拉框的默認選項詳解(select空白bug解決)
- 關於antd中select搜索框改變搜索值的問題
- JavaScript實現簡單省市聯動