快捷導(dǎo)航

antd?select?多選限制個(gè)數(shù)的實(shí)現(xiàn)代碼

更新時(shí)間：2022年11月09日 11:30:47 作者：一晌貪歡i

這篇文章主要介紹了antd?select?多選限制個(gè)數(shù),實(shí)現(xiàn)思路和核心代碼都很簡(jiǎn)單，其中核心代碼在于disabled，代碼簡(jiǎn)單易懂需要的朋友可以參考下

antd select 多選限制個(gè)數(shù)

直接給出源碼

<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數(shù)據(jù)結(jié)構(gòu)

[
  {
    "city": "北京市",
    "code": "4111010001",
    "createBy": null,
    "createTime": null,
    "department": "教育部",
    "id": 1,
    "level": "本科",
    "name": "北京大學(xué)",
    "updateBy": null,
    "updateTime": null
  },
  {
    "city": "北京市",
    "code": "4111010002",
    "createBy": null,
    "createTime": null,
    "department": "教育部",
    "id": 2,
    "level": "本科",
    "name": "中國(guó)人民大學(xué)",
    "updateBy": null,
    "updateTime": null
  },
  {
    "city": "北京市",
    "code": "4111010003",
    "createBy": null,
    "createTime": null,
    "department": "教育部",
    "id": 3,
    "level": "本科",
    "name": "清華大學(xué)",
    "updateBy": null,
    "updateTime": null
  }
]

再看一個(gè)復(fù)雜一點(diǎn)的例子：

		<a-select
              v-model="safeGroup"
              mode="multiple"
              placeholder="請(qǐng)選擇安全組"
              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>

其中對(duì)v-model綁定的數(shù)據(jù)處理在@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)
    }
  },

關(guān)于antd Select 限制選擇個(gè)數(shù)的解決方案

應(yīng)用場(chǎng)景描述：

Select 被form 所包裹，且被getFieldDecorator修飾。所以值的改變應(yīng)該通過(guò)form的setFieldsValue方法。

Select模式肯定會(huì)是multiple。且以最多三個(gè)值舉例。

解決思路如下：

1 起初是想在Select的onchange事件中判斷values的數(shù)量，數(shù)量大于三個(gè)的時(shí)候來(lái)重新setFieldsValue；且把最后的選項(xiàng)值替換成剛剛選擇的值。

后來(lái)發(fā)現(xiàn)setFieldsValue方法不起作用，Select的值會(huì)一直增加。后來(lái)想想可能是 setFieldsValue與onchange 沖突，通過(guò)setFieldsValue 無(wú)法改變onchange后的值。

2 最后通過(guò)重新查看文檔。發(fā)現(xiàn)還有一個(gè)方法可用，即 validator。驗(yàn)證值，通過(guò)驗(yàn)證所選值的數(shù)量是否大于三個(gè)，然后重新setFieldsValue ；發(fā)現(xiàn)此法可行。從而解決該疑難雜癥。

好，最后附上代碼供參考：

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(‘最多選擇三種語(yǔ)言‘)

} else {

newArr = value ;

callback()

}

}

{getFieldDecorator(‘languages‘, {

rules:[{required: true,message : ‘請(qǐng)選擇三種語(yǔ)言‘,

validator : changeValues

}],

validateTrigger : ‘onChange‘,

})(

1

2

3

4

5

)}

到此這篇關(guān)于antd select 多選限制個(gè)數(shù)的文章就介紹到這了,更多相關(guān)antd select 限制個(gè)數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: