美文网首页
iview的tab页切换前校验(getLabel)

iview的tab页切换前校验(getLabel)

作者: Clover园 | 来源:发表于2019-10-16 15:02 被阅读0次
 <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();
    }
  }

相关文章

网友评论

      本文标题:iview的tab页切换前校验(getLabel)

      本文链接:https://www.haomeiwen.com/subject/bycumctx.html