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

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

// DOM


            
              {{ item.categoryName }}
            
          

// 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)
    })
  }
},

你可能感兴趣的:(ant-design-vue中select多选限制选项选择数量最大值)