记使用el-form中遇到的一个坑，为什么改变了一个选项的值却触发了其他选项的表单验证？为什么el-slecet有值选择后却不回显？

先直接说一下解决方案吧：看一下el-form的:model绑定的对象是不是每一个表单数据都初始化了。
我的需求：
如图当选择了区域1时会动态改变区域2的选项，且区域2对应的表单验证required也会由false变成true，性别选项为独立选项。

最初代码：

<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item label="区域1" prop="region">
      <el-select v-model="ruleForm.region" placeholder="请选择区域1" @change="changeOption0">
        <el-option label="江苏" value="jiangsu"></el-option>
        <el-option label="四川" value="sichuan"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-select v-model="ruleForm.sex" placeholder="请选择性别" @change="changeOption1">
        <el-option label="男" value="male"></el-option>
        <el-option label="女" value="female"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="区域2" prop="region2">
      <el-select v-model="ruleForm.region2" placeholder="请选择区域2" @change="changeOption2">
        <el-option v-for="(item,index) in region2" :key="index" :label="item" :value="item"></el-option>
      </el-select>
    </el-form-item>
    

    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {},
      region2:[],
      rules: {
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        sex:[
          {required: true, message: "请选择性别", trigger: "change" }
        ],
         region2:[
          {required: true, message: "请选择活动区域2", trigger: "change" }
        ]
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.region2=[]
      this.ruleForm.region2=''
      this.rules.region2[0].required=false
      this.re2Require=false
    },
    changeOption0(val){
      this.ruleForm.region2=''
      this.region2=[]
      console.log(val)
      if(val=='sichuan'){
        this.region2=['mianyang','chengdou']
      }
      else{
        this.region2=['nanjing','suzhou']
      }
      this.rules.region2[0].required=true
      this.re2Require=true
    },
    changeOption1(val){
      console.log('option1改变了',val)
    },
    changeOption2(val){
      console.log('option2改变了',val)
    }
  },
};
</script>

结果意想不到的bug出现了：
bug1:最初进入页面时选择了区域1后，区域2就出现了表单验证要求选择区域2：

bug2:区域2下拉框有值，但是选择后却没有任何回显，可以看到区域2对应的change函数已经被触发了

bug3:
选择区域1后选择区域2，区域2内容不回显，此时选择性别后区域2的内容回显了，或者选择区域1，和性别后选择区域2不回显，但是此时改变性别选项后区域2内容又回显了。
解决：
1.关于区域2内容不回显的问题，查阅资料后有人说可以在区域2中添加change事件方法，在方法中调用this.$forceUpdate()
这个方法的确解决了区域2的回显问题。但是却意外的产生了其他bug,比如性别选项会偶尔出现不回显的问题，性别和区域2选择后表单验证仍提示请选择内容。
2.真正的解决：
首先说一下bug1,为什么首次选择区域1后会触发区域2的表单验证。
看一下区域1改变后触发的方法，由于区域2是由区域1动态改变的，所以每次在改变区域1后希望把区域2之前选择的内容清除，所以使用了this.ruleForm.region2=’’“，而最开始ruleForm.region2的值是undefined,因为开始是我们并没有定义它（后面会说到），所以就触发了区域2的change事件。

解决方法：
初始化ruleForm中对应的每一个表单变量：

所有的问题都迎刃而解了。