ant-design-vue中select多选限制选项选择数量最

方案：以最大值3为例，当已选择数据长度大于等于3，将选项中未包含已选中的选项disabled属性置为true，已选中的选项disabled置为false

// DOM

<a-select
            v-decorator="[
              'categoryList',
              {
                rules: [{ required: true, message: '请选择分类' }],
              },
            ]"
            not-found-content="暂无数据"
            placeholder="请选择分类"
            show-search
            mode="multiple"
            :allow-clear="true"
            :filter-option="filterOption"
            :get-popup-container="triggerNode => triggerNode.parentNode"
            @change="onCategoryChange"
          >
            <a-select-option
              v-for="item in categoryOptions"
              :key="item.categoryId"
              :value="item.categoryId"
              :disabled="item.disabled"
            >
              {{ item.categoryName }}
            </a-select-option>
          </a-select>

// js

resetCategoryOptions() {
  this.setCategoryOptions()
},
onCategoryChange (value) {
  this.setCategoryOptions(value)
},
setCategoryOptions (value = []) {
  if (value.length >= 3) {
    this.categoryOptions.forEach((item, index, array) => {
      if (value.every(v => v !== item.categoryId)) {
        this.$set(array[index], 'disabled', true)
      } else {
        this.$set(array[index], 'disabled', false)
      }
    })
  } else {
    this.categoryOptions.forEach((item, index, array) => {
      this.$set(array[index], 'disabled', false)
    })
  }
},