<TabPane :label="label1" name="basePage" >
</TabPane>
<TabPane :label="label2" name="inputPage" >
</TabPane>
<TabPane :label="label3" name="outputPage" >
</TabPane>
// 自定义标签页的内容以及它的事件
getLabel(label, name) {
return h => {
return h(
"div",
{
style: {
padding: "8px 16px"
},
on: {
click: e => {
var tip = this.tabClick(name); // 判断条件是否满足
if (tip) {
// this.logInside('tabClick','baseinfo验证通过');
} else {
// this.logInside('tabClick','baseinfo验证不通过');
e.stopPropagation(); // 不满足条件则阻止事件冒泡 本质是不让触发tab的on-click事件
}
}
}
},
this.$t(label)//翻译所有要this.$t包裹
);
};
},
// 切换前校验函数,阻止切换
tabClick(name) {
let result = true;
if(name!=='basePage'){
result = this.$refs.baseInfo.validateForm();
}
return result;
},
在mounted里面调用
mounted(){
this.label1 = this.getLabel("models.product.baseInformation", "basePage");
this.label2 = this.getLabel("models.product.inputItemDesign", "inputPage");
this.label3 = this.getLabel("models.product.outputDesign", "outputPage");
if (this.isEdit || this.isView || this.isAlter || this.isPatch || this.isCopy || this.isSmallAlter) {
this.getProductModelInfoById();
}
}
网友评论