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'
         }
}

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

具体效果

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐