element 下拉选择框多选，但当某个条件被选中，其他条件清空且被禁止选择

qq_58216500

于 2024-04-08 11:02:04 发布

阅读量494

点赞数 7

文章标签： vue.js elementui 前端

本文链接：https://blog.youkuaiyun.com/qq_58216500/article/details/137473622

版权

文章介绍了如何使用ElementUI中的select组件实现多选选项中，当选择特定选项（如N）时禁用其他选项，并通过change事件清空非N选项的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-select v-model="issueType" placeholder="issueType" filterable clearable multiple         
  collapse-tags @change="issueChange">
  <el-option
    v-for="item in issueList"
    :key="item.value"
    :label="item.label"
    :value="item.value"
    :disabled="issueType.indexOf('N') != '-1' ? item.value != 'N' : false"
  ></el-option>
</el-select>

issueChange(){
  if(this.issueType.indexOf('N') != '-1'){
    this.issueType = ['N'];
  }
},

以上则是通过element的属性disabled来控制当选择N这个选项时，其他选项禁止被选择。通过change方法来让选择项为N时，清空其他选项。