目錄

一. 需求描述

二. 解決思路

三. 代碼實現

四. 效果展示

---

一. 需求描述

如下圖所示，新增人員頁面，有字段"Leader DS"和"Leader DS名稱"。

現在我要在字段"Leader DS"和"Leader DS名稱"字段下方再添加一個新的字段叫"TL OR生效日"，并根據以下情況來判斷是否必填。

情況一：若"Leader DS"和"Leader DS名稱"字段值均不為空，則新增字段"TL OR生效日"設置為必填，并默認填充當前日期；

情況二：若"Leader DS"和"Leader DS名稱"字段值為空，則新增字段"TL OR生效日"設置為非必填，并不再默認填充日期值；

二. 解決思路

既然我們使用了Vue + Element UI的框架，相對來講就比較容易了；

首先第一步：編寫"TL OR生效日"字段的 Vue 代碼；

注解使用Element UI的組件庫，組建的使用方法如下所示

// el-form 表單標簽(表單容器)
// ref="xxx": 注冊表單引用，用于通過 this.$refs.xxx 訪問表單方法（如驗證提交）
// :model="xxx": 綁定表單數據對象（Vue 的 xxx 數據）
// :rules="xxx"： 綁定表單驗證規則對象(這里綁定的規則通常是恒定不改變的，必填就是必填，非必填就是非必填)
<el-form ref="xxx" :model="xxx" :rules="xxx" label-width="200px">// 行標簽(行容器)// 作用：創建一行布局容器（基于 24 分欄的柵格系統），通常放在表單標簽內部，一張表單會有很多行數據，每一對 el-row 標簽就是一行   <el-row>    <!--列標簽(列容器)，有行就會有列，列標簽必須寫在行標簽的內部！！！--><!--:span="xxx"標識當前列占用的行寬度比例，上面說到了一行分為24等比例--><!--所以如果希望一行有四列，則:span="6"；如果希望三列，則:span="8"，平分24即可，也可不平分，一列 :span="16"，另一列 :span="8"--><el-col :span="xxx"><!--表單項容器,item 內部就是我們來定義各種組件的地方，例如input組件，button組件等--><!--:label="xxx" 就是當前列的標簽名稱--><!--prop="xxx" 指定驗證規則對應的字段名（需與 personnelRules 中的鍵匹配）--><!--通常表單:rules="xxx"定義的是一個對象，對象內部就是一個個具體的字段校驗規則--><!--假設:rules="AAA"，內部定義了aaa，bbb，ccc三個字段校驗，則當前prop="AAA.ccc"--><el-form-item :label="xxx" prop="xxx"><!--v-model綁定值，如果表單z上為:model="person"，內部有多個屬性如name,age...--><!--則當前輸入框是什么值，就綁定對應的值--><el-input v-model="person.xxx" /></el-form-item></el-col></el-row>
</el-form>

其次第二步：編寫字段必填校驗規則；

必填校驗的方法常用的有以下兩種

第一種：也是上面提到的，寫在統一的父表單校驗規則對象中，然后使用對象.屬性校驗的方式將校驗規則綁定到對應的字段；如下代碼所示

return {formRules:{userName: { required: true, message: this.$t('common.required') }, // 用戶名email: [{ required: true, message: this.$t('common.required') }, { validator: validateEmail }], // 郵箱tlOrEffectDate: { required: true, message: this.$t('common.required') }, // TL OR生效......}
}

第二種： 在 Vue 的 data 或 computed 中定義規則，這種通常使用函數，函數返回值為必填屬性了如下代碼所示

computed: {tlOrEffectDateRule() {// 代碼邏輯,各種計算,得出字段必填屬性return ......}
}

最后第三步：將字段必填校驗規則綁定在 Vue 代碼字段上；

這一步是最簡單的，完成第一步或第二步，只需要將定義好的屬性或函數綁定到對應的字段即可；如下代碼所示

// 第一種方案綁定字段屬性
<el-form-item :label="TL OR生效日" :rules="formRules.tlOrEffectDate" prop="tlOrEffectDate"><el-date-pickerv-model="personnel.tlOrEffectDate" />
</el-form-item>// 第二種方案綁定字段屬性
<el-form-item :label="TL OR生效日" :rules="tlOrEffectDateRule" prop="tlOrEffectDate"><el-date-pickerv-model="personnel.tlOrEffectDate" />
</el-form-item>

三. 代碼實現

<!-- LeaderDS-->
<el-row><el-col v-if="this.personnel.personTypeId === 'DS'" :span="12"><el-form-item  :label="$t('personnel.newstaff.tlManager')" prop="tlManager"><code-searchv-model="personnel.tlManager"show-code:show-name="false"code-type="Person":other-conditions="{leaderDS: '1',personTypeId:'DS'}"@change="refFillManager('', ...arguments)"/></el-form-item></el-col><el-col v-if="this.personnel.personTypeId === 'DS'" :span="12"><el-form-item :label="$t('personnel.newstaff.tlManagerName')" prop="tlManager"><code-searchref="tlManagerName"v-model="personnel.tlManager"code-type="Person":other-conditions="{leaderDS: '1',personTypeId: 'DS'}"@change="refFillManager('', ...arguments)"/></el-form-item></el-col>
</el-row>
// 編寫要新增的字段 TL OR生效日 值
<!-- TL OR生效日 -->
<el-row><el-col :span="12" v-if="this.personnel.personTypeId === 'DS'"><el-form-item :label="$t('personnel.newstaff.tlOrEffectDate')" :rules="tlOrEffectDateRules" prop="tlOrEffectDate"><el-date-pickerv-model="personnel.tlOrEffectDate"value-format="yyyy-MM-dd"type="date":placeholder="$t('personnel.newstaff.optiondate')" /></el-form-item></el-col>
</el-row>// 初始化定義一個存儲表單所有元素值的對象
const newstaffperson = {// 這里定義頁面上的所有字段值，為了美觀簡潔，只展示上面代碼中相關的字段值，其余字段省略....tlManager: '', //  TL經理tlOrEffectDate: null, // TL OR生效日
}
// 在 vue 的 return 方法中，調用調用深拷貝方法，創建另外一個獨立的新的數據備份，防止響應式數據被意外修改
return {personnel: _.cloneDeep(newstaffperson),
}// 在 Vue 的 data 或 computed 中定義規則，因為我們要新增的字段，必填不是固定的，而是隨著其其他字段動態控制是否必填
computed: {// 定義 tlOrEffectDateRules 函數，采用動態函數計算屬性的方法為其設置必填屬性，將函數綁定到添加的字段"TL OR生效日"的屬性:rules上tlOrEffectDateRules() {const isRequired = this.personnel.tlManager !== null && this.personnel.tlManager.trim() !== '';return isRequired? { required: true, message: this.$t('common.required') } // tlManager 值不為空,必填,顯示星號: {}; // tlManager 值為空,非必填,返回空數組.表示：無校驗規則 => 不顯示星號}
},

四. 效果展示

?OK，編寫完畢代碼，我們進入頁面

情況一測試：如下圖，我選擇任意一個Leader DS，然后可以看到我添加的新字段"TL OR生效日"已經出現了星號必填；

現在我手動刪除日期，可以看到已經報出必填校驗了

?

情況二測試：如下圖，我將剛才選擇的"Leader DS"賦值為空值，可以看到，新添加的字段"TL OR生效日"必填星號樣式也沒有出現，也沒有提示我們該字段必填，這就實現了根據"Leader DS"是否為空動態控制"TL OR生效日"字段是否必填。