Iview的Tab栏校验不通过不跳转

Iview的Tab栏有校验,校验不通过不跳转

效果图

在这里插入图片描述

代码实现

<template>
    <Tabs v-model="name" @on-click="handle">
       
        <TabPane label="label1" name="basic">
          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
            
      
            <FormItem label="Name" prop="name1">
            <Input v-model="formValidate.name1" placeholder="Enter your name1"></Input>
        </FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
                <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>

        </Form>
        </TabPane>
        <TabPane label="label2" name="search">
         这里是Tab2内容
        </TabPane>
    </Tabs>
</template>
<script>
    export default {
    
    
         data(){
    
    
         return{
    
    
           flag:true,
           name:'basic',
           temp:'basic',
             formValidate: {
    
    
                    name1: '',
                },
                ruleValidate: {
    
    
                    name1: [
                        {
    
     required: true, message: 'The name cannot be empty', trigger: 'blur' }],
                }
         }
       },
         methods:{
    
    
	       async handle(a){
    
    
	         await this.handleSubmit() //这里必须使用await
	         if(this.flag==true){
    
    
	               this.temp=a
	               this.name=this.temp
	         }else{
    
    
	              this.name=this.temp
	         }
	       },
	        handleSubmit () {
    
    
	          if(this.temp=='basic'){
    
    
	             this.$refs['formValidate'].validate((valid) => {
    
    
	                if (valid) {
    
    
	                  this.flag=true
	                  return 
	                } else {
    
    
	                  this.flag=false
	                  return 
	                 }
	              })
	          }
	        },
	        handleReset (name) {
    
    
	          this.$refs[name].resetFields();
	        }
     },
    }
  
</script>

猜你喜欢

转载自blog.csdn.net/zzzz121380/article/details/126060458
今日推荐