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()
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>