element-ui 表单渲染v-if组件，验证报错

问题描述

使用elementui的form表单组件，如果其中几个表单项使用了v-if进行UI切换，并且默认v-if="false"不可见，切换的元素又是必填项时，那么在验证的时候，就会出现很奇怪的bug。

原因：

elementui在对form表单中带有prop属性的子组件进行校验规则绑定时，是在vue声明周期mounted完成的。而v-if用来切换的元素是会被销毁的，导致了v-if内的表单项，由于在mounted时期没有进行渲染，所以规则也没有绑定上。
那么就对el-form-item使用rules来进行动态绑定`，一旦切换就会绑定上这个rules。

另一个坑，自定义的验证方法中，比如validLandlordName(rule, value, callback) {}，有时会出现value这个值取不到为空。那么就直接获取你输入的属性值this.houseInfo.landlord.landlordName来进行验证，不要再对value进行判断了。

<el-form ref="form" :rules="rules" :model="houseInfo" inline size="mini" label-width="150px">

      <el-row>
        <el-col>
          <el-form-item label="所属社区" label-width="150px" prop="communityId">
            <el-select v-model.trim="houseInfo.communityId" placeholder="所属社区" :disabled="true">
              <el-option v-for="item in communityList" :value="item.communityId" :label="item.communityName" :key="item.communityId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
	<!--  houseInfo.houseType 值为4-->
	<el-row v-if="houseInfo.houseStatus == 4">
        <el-col>
          <el-form-item label="所属楼栋/单元" prop="buildingId" label-width="150px">
            <el-cascader placeholder="所属楼栋/单元" :disabled="houseTypeDisabled" :options="deptTreeBuilding" v-model="houseInfo.selectOptions"
              @change="selectedBuildingChanged" :change-on-select="true" style="width:200px">
            </el-cascader>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
      <!-- 此时这个手机号码，默认是不显示的，一旦切换渲染出来，验证规则不做特殊处理就会报错-->
      <div v-if="houseInfo.houseStatus !== 4">
        <el-row>
          <el-col>
            <el-form-item label="手机号码" prop="landlord.contactMobile" >
              <el-input v-model="houseInfo.landlord.contactMobile" style="width:200px" placeholder="请输入手机号码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
</el-form>

解决办法：
v-if中的表单元素，使用动态验证规则绑定，：rule=[XXX]，同时在method中自定义验证方法即可。

------ 如果文章对你有用，感谢右上角 >>>点赞 | 收藏 <<<