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

最新推荐文章于 2024-08-16 14:43:42 发布

三线城市的一枚小前端

最新推荐文章于 2024-08-16 14:43:42 发布

阅读量764

点赞数

文章标签： elementui vue

本文链接：https://blog.csdn.net/qq_41732757/article/details/121357064

版权

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

摘要由CSDN通过智能技术生成

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