Vue+ELEMENT-UI按钮根据后台返回的状态值进行动态的颜色渲染，是否禁用和按钮名称的改变

达不溜001

于 2021-03-24 17:56:05 发布

阅读量3.6k

点赞数 1

分类专栏： # Vue 文章标签： vue.js js javascript

本文链接：https://blog.youkuaiyun.com/Abraxs/article/details/115180993

版权

本文介绍如何使用Vue和Element-UI实现接货单操作中的按钮颜色变化、状态切换与禁用，通过双向数据绑定实现实时反馈。创建时为'待接货'，接货后变为'已接货'，详情页则锁定为灰色禁用。

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

Vue+ELEMENT-UI按钮根据后台返回的状态值进行动态的颜色渲染，是否禁用和按钮名称的改变

有个需求，对接货单号的操作。

新建接单完成后单子的状态会变成"待接货"状态，再次进行点击。
进入接货单，点击确认接货按钮，此时颜色为蓝色，然后返回。
列表状态变成"确认接货"。
点击单号进入详情，按钮变为灰色禁用，值变为了"已接货"。

下面是具体实现代码

telmplete里的html代码

<el-form-item style="margin-top: -22px">
                <el-button style="margin-left: 10px;" size="small" :type="btnColor" @click="receiveOrder" :disabled="isAble" >{
   {
   editBtn}

最低0.47元/天解锁文章