单选框部分选项禁用情况

最新推荐文章于 2024-06-04 16:48:10 发布

sy_yan

最新推荐文章于 2024-06-04 16:48:10 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript css vue.js

本文链接：https://blog.csdn.net/sy_yan/article/details/107546217

本文介绍了如何在Element-UI的select组件中实现部分选项的禁用功能，通过在数据处理中添加disabled属性并设置为true，可以达到只显示不启用的效果，适用于需要控制用户交互的场景。

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

element-ui 中 select 选项部分按钮需要显示但是不想让用户使用即禁用利用：disabled属性可以对数据进行处理将需要禁用的选项增加一个disabled属性为true

<template #rebateCode="scope">
    <el-select v-model="form.rebateCode" filterable  class="w-100" clearable @change="selectOptions" placeholder="请选择">
         <el-option
          v-for="(item, index) in options" :key="`class-${index}`"
          :label="item.dictName"
          :value="item.dictValue"
          :disabled="item.disabled"
          >
          </el-option>
      </el-select>
</template>

对数据进行处理

deleteUselessOptions(){
    let get = this.data; //data 是依照的数据 options是选项数据 要为其添加 disabled属性。
     this.options.map(item => {
         get.forEach(element => {
             if(element.rebateCode == item.dictValue) {
                 item.disabled = true;
             }
         });
     })
 }