:disabled禁用（是否有某个数据来判断禁用）后有禁用标志但是仍然可选

最新推荐文章于 2024-04-08 11:02:04 发布

原创最新推荐文章于 2024-04-08 11:02:04 发布 · 809 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#elementui #前端 #html5

收录于

前端（组件）专栏收录该内容

2 篇文章

订阅专栏

文章讨论了在Vue.js的ElementUI组件`el-option`中，如何正确使用`disabled`属性根据数据值判断是否禁用选项。原始代码中的`item.checkId`应被转换为布尔值`!!item.checkId`以确保禁用效果，点击禁用项后不再可选。

问题描述

使用:disabled禁用部分选项，使用某个数据是否有值来判断是否禁用，但是在页面上有禁用标志，点击禁用项后依然可以选中

原因

:disabled需要布尔值参数

原代码

<el-option
   v-for="item in partyList"
   :disabled="item.checkId"
   :key="item.partyId"
   :label="item.partyName"
   :value="item.partyId">
</el-option>

修改后代码

<el-option
   v-for="item in partyList"
   :disabled="!!item.checkId"
   :key="item.partyId"
   :label="item.partyName"
   :value="item.partyId">
</el-option>