vue element ui button按钮 disabled属性多个条件绑定实现禁止点击效果

蓝胖子的多啦A梦

已于 2022-03-31 15:15:29 修改

阅读量1.7w

点赞数 5

分类专栏： vue element 文章标签： javascript 前端 vue.js

于 2022-03-31 15:13:16 首次发布

本文链接：https://blog.csdn.net/Maxueyingying/article/details/123872574

版权

vue 同时被 2 个专栏收录

99 篇文章

订阅专栏

element

52 篇文章

订阅专栏

本文介绍了一项关于Vue框架中按钮禁用状态的小技巧。当需要根据特定条件（如status为0或1）控制按钮是否禁用时，正确使用逻辑运算符至关重要。文章详细解释了如何避免使用错误的逻辑运算符导致的问题，并提供了正确的代码实现。

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

需求：status为0或1时，按钮可点击其余禁止点击

一看需求很简单直接写：

 :disabled="scope.row.status !== 0 || scope.row.status !== 1"

结果发现 status为0 或者是1 button按钮都是禁止点击的
仔细一想不能用 || 应该用 &&
假如说：值是 0 则满足status=0 为true 但第二个条件status=1不满足为false
true|| false =true
则 disabled= true 按钮还是不可以点击

正确的需要改为：&&

   <el-button
            icon="el-icon-tickets"
            :disabled="scope.row.status !== 0 && scope.row.status !== 1"
            size="mini"
            type="primary"
            @click="outputOrder(scope.$index, scope.row)"
            >{{ $t("workOrder.orderExport") }}
   </el-button>

注：知识点是很小的一个但是因为本人不注意大意了也试了几种方法才找到原因，在此记录一下用作平时开发参考哦～