【el-button】显示与禁用

今天做一个功能,增加一个按钮,但是按钮是根据设备的在线状态来确定是否可以点击;
记录一下过程

    1. 首先想到的是el-button Attributes 中的 disabled ,它的默认值是false:如下图
  • 在这里插入图片描述
  • 2.有了按钮,缺少一个图标,在阿里巴巴矢量库是寻找一个合适的图标 ,找到之后,把图标加入到自己的购物车,然后添加到自己的项目中,最后下载到本地css 库,引入到自己的项目中,这块就不做过多说明;

iconfont https://www.iconfont.cn/manage/index
在这里插入图片描述

    1. 准备工作做好了,直接上代码
          <el-button 
	          type="text"
	            style="margin-top: -10px" 
	            :disabled="Object.statusId === '1'  ?  false : true">
	            <i title="端口配置" class="iconfont icon-port"></i>
          </el-button>

注意:
1. 一个是 此处引用的是:type=“text”, el-button 的type 很多,目前使用的是button 的 文字按钮 ,其中所中的图标也是矢量图标
2. disabled 的显示隐藏使用了表达式,三目运算
搞定
最终的效果图如图所示
在这里插入图片描述

在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐