表單校驗（選擇下拉框，input變化 不影響校驗）

選擇下拉框時 類型不同，但是可以只在當前類型中點擊“立即創建”，不影響下一類型的校驗

<el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="類型" prop="region">
        <el-select v-model="ruleForm.region" @change="clickOption">
          <el-option
            v-for="item in optionList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <div v-if="ruleForm.region == 1"> // 判斷
        <el-form-item label="賬戶" prop="zhang">
          <el-input
            type="text"
            v-model="ruleForm.zhang"
          ></el-input> </el-form-item
        ><el-form-item label="名稱" prop="ming">
          <el-input type="text" v-model="ruleForm.ming"></el-input>
        </el-form-item>
        <el-form-item label="科目" prop="kemu">
          <el-input type="text" v-model="ruleForm.kemu"></el-input>
        </el-form-item>
      </div>

      <div v-if="ruleForm.region == 2"> // 判斷
        <el-form-item label="編碼" prop="bian">
          <el-input
            type="text"
            v-model="ruleForm.bian"
          ></el-input> </el-form-item
        ><el-form-item label="稱號" prop="yin">
          <el-input type="text" v-model="ruleForm.yin"></el-input>
        </el-form-item>
        <el-form-item label="掛掉" prop="dui">
          <el-input type="text" v-model="ruleForm.dui"></el-input>
        </el-form-item>
      </div>

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

data() {
    return {
      optionList: [
        { value: 1, label: "類型一" },
        { value: 2, label: "類型二" },
      ],
      ruleForm: {
        region: 1, // 默認選中第一個
        zhang: "",
        ming: "",
        kemu: "",
        bian: "",
        yin: "",
        dui: "",
      },
      rules: { // 校驗
        zhang: [{ required: true, message: "請輸入zhang", trigger: "blur" }],
        ming: [{ required: true, message: "請選擇ming", trigger: "change" }],
        kemu: [{ required: true, message: "請選擇kemu", trigger: "change" }],
        bian: [{ required: true, message: "請選擇bian", trigger: "change" }],
        yin: [{ required: true, message: "請選擇yin", trigger: "change" }],
        dui: [{ required: true, message: "請選擇dui", trigger: "change" }],
      },
    };
  },
  methods: {
    clickOption(val) { // 下拉框選擇
      if (val == "1") {
        this.$refs.ruleForm.resetFields(); // 清空
        this.ruleForm.region = 1; // 賦值
      } else if (val == "2") {
        this.$refs.ruleForm.resetFields();
        this.ruleForm.region = 2;
      }
    },
    submitForm(formName) { // 立即創建
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },