vue多步骤表单的实现以及遇到的问题

1.多步骤表单的实现

使用elment-ui的组件步骤条（el-step）和表单组件（el-form）实现

传送门

组件 | Element

实现代码如下

 <el-steps :active="active" finish-status="success">
        <el-step title="登记基本信息" />
        <el-step title="上传合同信息" />
    </el-steps>
    <el-form
        ref="dataForm"
        :model="dataForm"

        :rules="formRules"

        label-position="left"
        label-width="100px"
        style="width: 400px; 
        margin-left: 50px">
        
<!-- 基本信息填写部分 -->
    <div v-show="active == 1">

        <el-form-item label="用户名" prop="realName">
          <el-input v-model="dataForm.realName" placeholder="姓名"></el-input>
        </el-form-item>

        <!--  -->
        <el-form-item label="工号" prop="userName">
          <el-input v-model="dataForm.userName" disabled></el-input>
        </el-form-item>
  
        <el-form-item label="部门" prop="dep" >
          <el-select v-model="dataForm.dep" placeholder="开发部" >
            <el-option v-for="item in depList" 
            :label="item.name"  
            :value="item.id" 
            :key="item.id">
          </el-option>
          </el-select>
        </el-form-item>
  
        <el-form-item label="权限" prop="permissions">
          <el-checkbox-group v-model="dataForm.permissions">
            <el-checkbox v-for="item in permissionsList"
            :key="item.roleId"
            :label="item.roleId"
           >
           {{ item.roleName }}
          </el-checkbox>
          </el-checkbox-group>
          </el-form-item>
    </div>
  <div v-show="active == 2">
        
      <el-form-item label="签订时间" prop="createDatetime">

      <el-date-picker
      v-model="dataForm.createDatetime"
      value-format="yyyy-MM-dd"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
      </el-form-item>
      <el-form-item label="到期时间" prop="overDatetime">

    <el-select v-model="dataForm.overDatetime" placeholder="合同年限">
        <el-option label="一年期" value="1" ></el-option>
        <el-option label="两年期" value="2" ></el-option>
        <el-option label="三年期" value="3"></el-option>
        <el-option label="四年期" value="4"></el-option>
      </el-select>
      </el-form-item>

      <el-form-item label="状态" size="mini" prop="tag">
      <el-radio-group v-model="dataForm.tag">
          <el-radio :label="0">实习</el-radio>
          <el-radio :label="1">正式</el-radio>
          <el-radio :label="2">劳务</el-radio>
      </el-radio-group>
      </el-form-item>
</div>

2.遇到的问题

上面的代码实现了一个多步骤的表单，接下来就是对表单校验规则的完善。预期的实现效果是必须完整填写第一个表单的所有字段才可以进入第二步骤，如何才能对表单的部分字段进行校验呢？

参考element官方文档。

this.$refs['dataForm'].validateField(['dep','realName'], (valid) => {

        if (!valid) {

           // 处理逻辑

        }

})