elementUI实现不同用户登录表单

这是本人在做毕设时遇到的问题，对于熟悉前端的童鞋，这应该算不是难题，可惜我学艺不精，特对此记录一下本人的需求是登录组件里有一个用户登录，但是涉及到的用户身份有两种，房客和房主，房主拥有发布房源的权限，房客只拥有查看房源，预定房源的权限，所以这就涉及到不同身份用户的登录 我想到了利用elementUI里的Tabs组件，可以根据绑定一个变量，加一个名称进行标识，来切换tab栏进行不同用户的登录

问题描述

我在Tabs组件里添加了Form组件，但是出现了表单验证失败的问题，房客的表单输入后，明明有了值，却是验证失败，打印出那个valid是false，而房主的表单却是正常的，还有一个就是重置表单失败的问题，先附上之前有问题时的代码

html代码图示

后来进行几番折腾，我猜想应该是表单组件污染的问题，也就是两个表单绑定的相同的数据源，如果同时都在dom中渲染出来的话会产生一下意外的问题发生，就比如我遇到的这个表单验证问题，所以我就想到用v-if实现条件渲染，然后加了两个变量来控制两个Form组件的显示与隐藏，这样就解决了表单验证失败的问题，而重置表单失败的问题，我也没搞明白，百度了一波，说是有两种重置表单方法链接，我是先用了第一种方法，重置失败，然后采用了第二种方法

 //第一种方法重置失效
 // this.$refs.userRuleForm.resetFields()
 // 第二种方法重置表单成功
    this.userRuleForm = this.$options.data().userRuleForm;

最后附上我的代码

<template>
  <div class="Land">
    <div class="ctn">
      <div class="ctnInfo">
        <div class="ctnBox">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="房客登录" class="fangzhudl" name="first">
              <el-form
                v-if="userFormVisible"
                :model="userRuleForm"
                status-icon
                :rules="userFormRules"
                ref="userRuleForm"
                class="demo-ruleForm"
              >
                  <el-form-item label="请输入房客名" prop="username">
                    <el-input  type="text" v-model="userRuleForm.username" clearable></el-input>
                  </el-form-item>

                <el-form-item label="请输入密码" prop="password">
                  <el-input type="password" clearable v-model="userRuleForm.password" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item class="tijiao">
                  <el-button type="primary" @click="submit('userRuleForm')" class="tijiao-anniu">登录</el-button>
                  <el-button @click="register('userRuleForm')" class="chongzhi-anniu">注册</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="房主登录" class="yonghudl" name="second">
              <el-form
                v-if="houseFormVisible"
                :model="userRuleForm"
                status-icon
                :rules="userFormRules"
                ref="userRuleForm"
                class="demo-ruleForm"
              >
                  <el-form-item label="请输入房主名" prop="housename">
                    <el-input  type="text" v-model="userRuleForm.housename" clearable></el-input>
                  </el-form-item>
                <el-form-item label="请输入密码" prop="password">
                  <el-input type="password" clearable v-model="userRuleForm.password" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item class="tijiao">
                  <el-button type="primary" @click="submit('userRuleForm')" class="tijiao-anniu">登录</el-button>
                  <el-button @click="register('userRuleForm')" class="chongzhi-anniu">注册</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 控制tab面板显示房客和房主切换登录
      activeName: "first", //默认显示tabs页第一页
      userFormVisible: true,//默认先显示房客登录表单
      houseFormVisible: false,//不显示房主登录表单
      // 登录表单字段
      userRuleForm: {
        housename: "",
        username: "",
        password: "",
      },
      // 表单验证规则
      userFormRules: {
       username: [
          { required: true, message:  '请输入用户名' , trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
       housename: [
          { required: true, message:  '请输入房主名' , trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    handleClick(tab) {
      if(tab.name === 'second') {
        this.houseFormVisible = true；
        this.userRuleForm = this.$options.data().userRuleForm;
        this.userFormVisible = false;
      // })
      }
      if(tab.name === 'first') {
        this.userFormVisible = true;
        this.userRuleForm = this.$options.data().userRuleForm;
        this.houseFormVisible = false;
     }
    },
    submit() {
      this.$refs.userRuleForm.validate(async valid => {
        console.log(valid);
        if (!valid) {
          this.$message.warning('请完善登录信息');
        } else {
        ...登录成功后的逻辑
        }

总结

学习的过程要不断去思考，摸爬滚打，解决问题的关键就是对症下药，找到问题的根本原因，这才是解决问题的关键。