动态禁用el-select中某个选项

Faily...

已于 2024-02-28 17:47:08 修改

阅读量2k

点赞数 12

文章标签： vue.js 前端 javascript

于 2024-02-28 17:40:20 首次发布

本文链接：https://blog.youkuaiyun.com/m0_65299760/article/details/136352039

版权

本文介绍了如何在JavaScript中，特别是在Vue框架中，通过遍历数组并根据特定条件为数组元素设置`disabled`属性，实现动态禁用下拉选项的功能。

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

根据条件禁用数组中的某些元素

js：遍历数组中的值，然后根据条件禁用其中的某些元素

// 判断当前元素的id是否等于数组中的id 相等给当前元素禁用
typeList.value.forEach(() => {
  for (let i = 0; i < typeList.value.length; i++) {
    if (typeList.value[i].id === selectType.value.id) {
      typeList.value[i].disabled = true;
    }
  }
});

vue：通过:disabled动态禁用下拉选项

<el-select
  v-model="typeId"
  class="m-2 w-full"
  placeholder="请选择"
>
  <el-option
    v-for="item in typeList"
    :key="item.id"
    :label="item.name"
    :value="item.id"
    :disabled="item.disabled"
  />
</el-select>