el-button 多条件判断，设置按钮禁用

最新推荐文章于 2024-05-27 14:46:49 发布

Daisy_ls

最新推荐文章于 2024-05-27 14:46:49 发布

阅读量2.8k

点赞数 1

分类专栏：工作中的问题 vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/Daisy_ls/article/details/128707406

版权

本文介绍了在Vue.js和ElementUI中如何实现多条件判断以禁用按钮的功能。针对业务需求，如总分超过预期、试题生成成功及对话框开启时试题已存在等场景，通过使用逻辑运算符`||`组合不同条件，实现按钮的动态禁用状态。在生成试题后及关闭对话框时，需记得重置禁用状态。

摘要由CSDN通过智能技术生成

业务需求：

①按钮在总分超过预计值时禁用

②在试题生成成功时禁用

③在打开dialog时，试题已存在时禁用

出现的问题

总分超过预计值时，按钮不能禁用

问题代码：

这种情况只能控制需求①，②③控制不了

这种情况只能控制②③，①控制不了

解决方法：

通过 || 关系，来控制判断条件

具体代码：

<el-form-item label="考试题型：" v-model="bindQuestionList">
                <div v-for="(item, index) in bindQuestionList" :key="index">
                    <el-checkbox v-show="item.questionTitle == '单选题'" v-model="item.choose"
                        @click="changeQuestionTitle('1', item)" labe