08-表單校驗之聯動校驗（下拉框的某個選項觸發另一項要校驗）

 

 需求：

1. 字段類型本身是有需要必選的校驗，只有當且選擇數據字典時，才會動態的觸發來源字典的校驗（必填），反之，去除來源字典的校驗。

2. 當下拉框選擇數據字典后，觸發了來源字典的校驗，這時候來源字典滿足校驗后，會移除錯誤提示信息，反之，沒有輸入任何內容失焦后又會重新觸發校驗；當下拉框切換為非數據字典的選項時，又執行上面第一條的校驗邏輯

3.當下拉框選擇數據字典時，來源字典會動態展示紅星( * )，反之，不顯示紅星； 紅星是為了跟element的form表單風格保持一致。（需要自己手動實現，因為不會實時觸發視圖更新）

實現效果：

來源字典輸入后，符合校驗，隱藏了錯誤提示；清空后又重新觸發了必填校驗

---

 代碼實現：

 data() { return { formObj: { fieldType: '',   //字段類型下拉框
        sourceDict: '', //來源字典
 }, }

   <el-row :gutter="110">
            <el-col :span="12">
              <el-form-item label="字段類型" prop="fieldType">
                <el-select v-model="formObj.fieldType" style="width: 100%" placeholder="請選擇" @blur="blurSelect('fieldType')" @change="blurSelect('fieldType')"
                >
                  <el-option v-for="item in fieldTypeSelectData" :key="item.id" :label="item.itemText" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <div class="sourceDict_box">
                <i v-if="formObj.fieldType === '4'" class="star">*</i> //紅*
                <el-form-item style="padding-left: 6px" label="來源字典" prop="sourceDict">
                  <el-input v-model="formObj.sourceDict"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

 watch: { formObj: { deep: true, handler(val) { if (Number(val.fieldType) === 4 && val.sourceDict === '') { this.formblurRequiredRuleFn({    //此為封裝的必填方法
            sourceDict: ['來源字典', '輸入'] }) this.$refs.ruleForm.validateField('sourceDict') //單獨觸發校驗
        } else { this.$refs.ruleForm.clearValidate(['sourceDict']) //移除校驗
 } } } },

紅星樣式：

.sourceDict_box { position: relative; .star { position: absolute; left: -5px; top: 11px; color: #f56c6c; font-size: 20px;
  } }