el-select 选项只能被选一次

最新推荐文章于 2025-08-21 20:37:41 发布

原创最新推荐文章于 2025-08-21 20:37:41 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

笔记专栏收录该内容

35 篇文章

订阅专栏

本文介绍如何在使用Element UI框架的项目中实现下拉菜单选项禁用已选择的功能。通过设置DOM元素的禁用状态，确保同一选项不会被重复选择。

项目中经常会遇到下拉单选时，已经被选用的选项就不能再被选用。可以将Dom置灰：

<el-tree
    :data="List"
>
    <el-select v-model="node" @change="handleChange(node)">
       <el-option :disabled="optDisable(item)" v-for="item in childList" :key="item.id" :label="item.modelName" :value="item.id">
       </el-option>
    </el-select>
</el-tree>

data() {

selectOption: [],// 选择器的选中项

}


    /**
     * option change事件
     */
    handleChange(value) {
       return this.selectOption.push(value)
    },
    // dom 置灰
    optDisable(value) {
      if (this.selectOption.indexOf(value.id) >= 0) {
        return true;
      } else {
        return false;
      }
    },