element-select多选，选择固定几项，其余状态为disable

原创于 2021-11-16 16:03:10 发布 · 867 阅读

CC 4.0 BY-SA版权

文章标签：

该博客介绍了如何在Vue.js项目中使用Element UI的el-select组件实现多选功能，并在选中特定选项后，自动禁用其余未被选中的选项。通过监听change事件和遍历options数组，动态设置option的disabled属性，实现了定制化的多选下拉框交互效果。

element-select多选，选择固定几项，其余状态为disable

页面html：

// An highlighted block
类型选择:
      <el-select multiple v-model="pvalue" collapse-tags placeholder="请选择" class="select" @change="choosePvalue">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item"
          :disabled="item.disable"
          >
        </el-option>
      </el-select>

methods：

// An highlighted block
choosePvalue(val){
      if(val.length>1){
        this.options.forEach((item,index)=>{
          item.disable = true
          val.forEach((item1,index1)=>{
            if(item1.value == item.value){
                item.disable = false 
            }
          })
        })
      }else{
         this.options.forEach((item,index)=>{
          item.disable = false
        })
      }
    },