今天犯了個低級錯誤，雖然走了很多彎路，但這個過程還是值得記錄一下
例子如下，有兩個輸入框：
第一個是套餐選擇下拉框，可以下拉選擇三個內容
第二個要根據上面的套餐選擇三個選項來決定怎么顯示，使用v-if（第一個下拉框的值來做條件顯示）
（1）如果套餐選擇選招牌冰淇淋，第二個輸入框就是招牌冰淇淋下拉框，
就以下拉框的形式顯示口味
（2）如果套餐選擇選小吃，第二個輸入框就是小吃輸入框，
就讓客戶自己填寫什么小吃
（2）如果套餐選擇選冷飲，第二個輸入框就是冷飲輸入框，
就讓客戶自己填寫什么冷飲
然后無論第一個套餐選擇選哪個選項，都要對第二個框進行非空、長度規則等校驗，剩下的兩個沒選的就不做校驗，這里其實v-if取了第一個下拉框的值來對第二個輸入框做條件顯示的時候，另外兩個就不會顯示，即不走rules，但我沒把第二個輸入框的規則寫在rules里面，自己做了一個驗證規則
具體邏輯就是在確定按鈕提交表單時，調取this.validateForm()方法去校驗一下第一下選的是哪個選項，再決定去校驗后面的哪個輸入框
核心校驗代碼：?
?
詳細代碼：?
<!--第一個下拉框-->
<el-form-item label="套餐選擇" prop="setMealType"><el-select v-model="form.setMealType" placeholder="請選擇變更類型" size="small" clearable><el-option label="招牌冰淇淋" value="1"></el-option><el-option label="小吃" value="2"></el-option><el-option label="冷飲" value="3"></el-option></el-select>
</el-form-item>
<!-- 第二個輸入框(1號)-->
<el-form-item label="招牌冰淇淋" prop="newVehicleColour" v-if="form.setMealType === '1'"><el-select v-model="form.newVehicleColour" placeholder="請選擇冰淇淋口味" filterable clearable size="small"><el-option label="香草冰淇淋" value="1"></el-option><el-option label="牛奶紅棗" value="2"></el-option><el-option label="薄荷香芋" value="3"></el-option></el-select><div><span v-if="errors.newVehicleColour" class="err">口味不能為空!</span></div>
</el-form-item><!-- 第二個輸入框(2號)-->
<el-form-item label="小吃" prop="newMotornumber" v-if="form.setMealType === '2'"><el-input v-model="form.newMotornumber" placeholder="請輸入小吃" maxlength="30" ></el-input><span v-if="errors.newMotornumber" class="err">小吃不能為空!</span>
</el-form-item><!-- 第二個輸入框(3號)-->
<el-form-item label="冷飲" prop="newBatteryNum" v-else-if="form.setMealType === '3'"><el-input v-model="form.newBatteryNum" placeholder="請輸入冷飲" maxlength="30" /><span v-if="errors.newBatteryNum" class="err">冷飲不能為空!</span>
</el-form-item>?data和rules：(data聲明errors , rules僅對第一個輸入框校驗)
data() {return {// 遮罩層loading: true,//表單參數form: {},// 錯誤信息errors: {},// 表單校驗rules: {changeType: [{required: true,message: "請選擇套餐類型",trigger: "blur"}],}};},表單重置:(將this.errors置空)
// 表單重置reset() {this.form = {id: null,......createBy: null,createTime: null,updateBy: null,updateTime: null,remark: null};this.errors = {};this.resetForm("form");},校驗規則:
// 自定義校驗方法validateField(field) {this.errors[field] = '';if (!this.form[field]) {this.errors[field] = `${field} 不能為空!`;}},// 校驗所有字段validateForm() {this.errors = {};if (this.form.changeType === '1') {this.validateField('newVehicleColour');} else if (this.form.changeType === '2') {this.validateField('newMotornumber');} else if (this.form.changeType === '3') {this.validateField('newBatteryNum');}// 檢查是否有錯誤for (const key in this.errors) {if (this.errors[key]) {// this.$message.error(this.errors[key]);return false;}}return true;},重置按鈕:
/** 重置按鈕操作 */resetQuery() {this.errors = {};this.resetForm("queryForm");this.handleQuery();},表單提交按鈕:
/** 提交按鈕 */submitForm() {if (this.validateForm()) {// 表單驗證通過console.log('表單驗證通過', this.form);this.$refs["form"].validate(valid => {if (valid) {if (this.form.id != null) {update(this.form).then(response => {this.$modal.msgSuccess("修改成功");this.open = false;this.getList();});} else {add(this.form).then(response => {this.$modal.msgSuccess("新增成功");this.open = false;this.getList();});}}});// 這里可以添加提交表單的邏輯} else {// 表單驗證失敗console.log('規則驗證失敗', this.errors);}},自定義提示語樣式
<style>.err {color: red;font-size: 12px;
}
</style>
