方案：以最大值3為例缚忧，當(dāng)已選擇數(shù)據(jù)長度大于等于3，將選項(xiàng)中未包含已選中的選項(xiàng)disabled屬性置為true，已選中的選項(xiàng)disabled置為false
// DOM
<a-select
v-decorator="[
'categoryList',
{
rules: [{ required: true, message: '請選擇分類' }],
},
]"
not-found-content="暫無數(shù)據(jù)"
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)
})
}
},
