element ui 中el-button按钮 , 动态设置el-button的type 即显示颜色

这篇具有很好参考价值的文章主要介绍了element ui 中el-button按钮 , 动态设置el-button的type 即显示颜色。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

element ui 中el-button按钮,根据不同数据改变按钮type即显示颜色

element ui 中el-button按钮 , 动态设置el-button的type 即显示颜色

例一:

html:

   <el-button
        :type ="buttonType(item)"
        plain
        v-for="(item, index) in btnsArr"
        :key="index"
        @click="runBtnEvent(item,index)"
    >${ item.label }
    </el-button>

JS:

        methods:{
            buttonType(val){
                if(val.flag == "1"){
                    return "primary"
                }
                else{
                    return "info"
                }
            },

            runBtnEvent(btn,index) {
                var that = this;
            },
       }     
                

例二:

**html**
<el-button :type="buttonType(val)">按钮1</el-button>
<el-button :type="buttonType(val)">按钮2</el-button>

js:文章来源地址https://www.toymoban.com/news/detail-505573.html

  methods:{
    buttonType(val){
     if(val=="success"){
       return "primary"
     }
     if(val=="failure"){
       return "danger"
     }
 
   }
 }

到了这里,关于element ui 中el-button按钮 , 动态设置el-button的type 即显示颜色的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • el-button自定义图片显示

    想要在button上显示自己的图片,而不是使用element-ui提供的el-icon 效果如图:中间这个按钮就是我自己的图片,devops.png 具体实现方法如下: 首先将图片引入,引入路径随你,我是将图片放到assets目录下 在按钮处自定义icon 在css中设置el-icon-devops 最后就可以显示出来啦。我用的

    2024年02月15日
    浏览(30)
  • el-button更改选中后的默认颜色

    先统一设置按钮颜色type=\\\"primary\\\" 点击后将颜色改为橘色效果图: 修改样式代码如下:

    2024年02月17日
    浏览(28)
  • vue el-table的每行操作el-button添加单独的loading效果实现

    实现就这么简单,一目了然。 你的压力来源于无法自律,只是假装努力,现状跟不上内心的欲望,所以你焦虑又恐惧。

    2024年02月13日
    浏览(40)
  • element ui el-input输入框type=number去掉上下箭头

    使用vue框架写法 如果是input标签type=number,将上述css代码中 ::v-deep 去掉即可

    2024年02月12日
    浏览(35)
  • element-ui的el-upload上传文件按钮在选取文件按钮禁用后仍可点击问题

    element-ui的el-upload上传文件按钮在选取文件按钮禁用后仍可点击,如下图: 点击按钮已经置灰,但是仍能点开选择图片弹窗,虽然无法上传,但是体验不好。 听说是因为:disabled只是禁用了点击事件,并没有禁用打开文件选择窗口 方法一: 附代码: 方法二: 换成一个假的

    2024年02月11日
    浏览(39)
  • element-ui中更换el-dialog弹窗中默认的关闭按钮

    在使用 element-ui 框架里的 el-dialog 组件时,要修改弹窗里默认的关闭图标;如下图所示:左边是想要替换后的;右边是组件默认的关闭图标; 通过检查组件的元素;发现组件默认的关闭是一个图标;通过图标的形式展现的。 那就可以通过 CSS 隐藏当前的图标;然后在当前图标

    2024年02月12日
    浏览(29)
  • Element UI el-date-picker datetime 日期时间选择器 底部添加清除按钮

    客户需要在时间选择器点击后在选择面板的下方添加一个清除按钮进行时间的清除,不想使用自带的清除小x按钮。 element-ui并没有暴露可以自定义按钮与事件。 我想到了两个方案解决 1.使用组件提供的快捷方法 Shortcuts 完成,需要把样式调整到对应的位置。由于我最终没有选

    2024年04月10日
    浏览(37)
  • element-ui中el-table点击其他自定义按钮展开table中某一行

    在日常开发中,我们遇见了会有点击某些按钮,使得表格行展开的需求,这时候去查看文档 element-ui(table) 这里官方提供了示例为在行最左侧有一个展开合并icon,但是点其他地方不能展开,我们又想点其他地方而展开 我们看见是在table-column上定了type为expand,而该列里面的

    2024年01月18日
    浏览(26)
  • 解决使用element ui时el-input的属性type=number,仍然可以输入e的问题。

    使用element ui时el-input的属性type=number,仍然可以输入e, 其他的中文特殊字符都不可以输入,但是只有e是可以输入的,原因是e也输入作为科学计数法的时候,e是可以被判定为数字的, 但是有些场景是需要把e这种情况屏蔽掉的,我们可以使用如下的方法。 在进行键盘事件输入

    2024年02月08日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包