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

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

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

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

下面是具体实现代码

telmplete里的html代码

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

data() {
        return {
            // preScope: this.$route.query.data,
            deviceScope: {},
            form: {},
            editBtn: '',
            btnColor: '',
            deviceDetails: [],
            deviceDetailLists: {},
            multipleSelection: []
        }
},

重点是editBtn,btnColor这两个属性，以及标签里的:disabled=“isAble” ，{{editBtn}},:type="btnColor"对按钮的值和颜色的控制,原理双向数据绑定。

editBtn: ‘’,
btnColor: ''

当vue实例在created阶段，调用接口，对以上几个标签和两个属性进行操作。

created(){
        this.form = this.$route.query.data
        console.log(this.form)
         if (this.form.statusValue === '确认接货') {
            this.isAble = true; // 注意true是不可用
            this.editBtn = '已接货'
            this.btnColor = 'info'
         } else if (this.form.statusValue === '待接货' || this.form.statusValue === '拼单-待接货'){
            this.isAble = false; //可用
            this.editBtn = '确认接货'
            this.btnColor = 'primary'
         }
}

从上一页面拿到传递的数据进行判断，动态赋值，动态改变按钮类型。

具体效果