vue根据返回数据状态给按钮动态设置disabled属性
需求如下:根据返回值的状态(status的值),如果值为0/1/2可以使用打卡按钮,status的值为其他的则禁用。原按钮为:<el-button type="primary" size="mini">打卡</el-button>根据状态渲染:第一种方法,采用v-if,v-else:<el-buttonv-if="vo.status===0 || vo.status=
·
需求如下:
根据返回值的状态(status的值),如果值为0/1/2可以使用打卡按钮,status的值为其他的则禁用。
原按钮为:
<el-button type="primary" size="mini">打卡</el-button>
根据状态渲染:
第一种方法,采用v-if,v-else:
<el-button
v-if="vo.status===0 || vo.status===1 || vo.status===2"
type="primary"
size="mini"
@click="handMember(vo.id,'signin')">打卡
</el-button>
<el-button v-else disabled type="primary" size="mini">打卡</el-button>
这个方法是写了两个按钮,只是根据值判断显示哪个按钮,代码看着不优雅。
第二种方法,直接一个按钮搞定,用三元表达式给disabled添加false或true值:
<el-button
disabled="vo.status!==0 || vo.status!==1 || vo.status!==2 ? false : true"
type="primary"
size="mini"
@click="handMember(vo.id,'signin')">打卡
</el-button>
提醒:上面这个方法做完后经过检查,有报错。大概意思是disabled接受的属性是一个布尔值,但是这个布尔值是不能直接在标签内改的。
草率了,没仔细检查,博文都发出去了才发现这个问题,
经过反复调试,发现 :disabled=“true” 这样设置是有效的,还是上面的思路,只是把disabled属性绑定在一个变量上。
这样好办,改为下面这样:
<el-button
:disabled="vo.status===0 || vo.status===1 || vo.status===2 ? false : true"
type="primary"
size="mini"
@click="handMember(vo.id,'signin')">打卡
</el-button>
简写形式为:
<el-button
:disabled="!(vo.status===0 || vo.status===1 || vo.status===2)"
type="primary"
size="mini"
@click="handMember(vo.id,'signin')">打卡
</el-button>
这下放心使用,绝对没有问题,已经反复测试过。
好了,就酱。
更多推荐
已为社区贡献2条内容
所有评论(0)