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","id": 2,"name": "中国人民大学","code": "4111010003","id": 3,"name": "清华大学","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

)}