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

最新推荐文章于 2023-11-24 15:33:25 发布

原创

最新推荐文章于 2023-11-24 15:33:25 发布 · 3.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

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

业务需求：

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

②在试题生成成功时禁用

③在打开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"
                        @c