Vue动态控制按钮显示与隐藏
工作中有一个需求就是,对未收货的订单可以进行收货确认;但是已经确认收货的订单如果继续收货确认后台会报错;为了解决这个问题,可以在列表选择时,如果勾选了已经收货确认的订单把收货确认按钮隐藏起来;前端代码如下:<div v-if="isShow" class="fr of p10" ><button class="mr10 main_btn" @click="confirm">
·
工作中有一个需求就是,对未收货的订单可以进行收货确认;但是已经确认收货的订单如果继续收货确认后台会报错;为了解决这个问题,可以在列表选择时,如果勾选了已经收货确认的订单把收货确认按钮隐藏起来;
前端代码如下:
<div v-if="isShow" class="fr of p10" >
<button class="mr10 main_btn" @click="confirm">收货确认</button>
</div>
v-if属性:isShow为true显示按钮,为false隐藏按钮;
vue代码如下:
handleSelection: function(selection){
var stackingNoList = [];
var _this = this;
_this.isShow =true;
$.each(selection, function(i, d){
if(d.statusName== '已收货确认'){
_this.isShow =false;
return;
}else{
stackingNoList.push(d.stackingNo);
}
});
this.stackingNoList = stackingNoList;
},
效果图如下:选未收货按钮显示
选择数据有已收货确认按钮消失
更多推荐
已为社区贡献1条内容
所有评论(0)