1.首先根據后端返回的數據格式獲取類型從而展示對應的框

// fieIdName label名字  
// fieIdType 類型  1和4是輸入框  2日期框  3日期時間框  5下拉框
// isRequired  1必填 0不必填
// fieIdTypeRange 存放一部分的下拉框的值 需要拿到數據后轉成下拉框所需要的格式這種數據格式
jsonExample: [{fieIdName: '賬戶',fieIdType: 1,isRequired: 1,fieIdValue: '',fieIdTypeRange: "是;否"}
]

2.對不符合的數據在進行一次處理? 比如剛才上述提到的fieIdTypeRange

2-1  定義一個空集合 放處理后的下拉框的數據let selectList=[]2-2  對后端返回的數據進行處理for (var n = 0; n < res.data.length; n++) {if (res.data[n].fieldType == 5) {const options = res.data[n].fieldTypeRange.split(";").map((val) => ({                     label: val, value: val }));selectList = options;this.$set(res.data[n], "selectoptions", selectList);}}2-3  下拉框綁定的數據源是 selectoptions

3.具體代碼如下

   <div class="form_item_content"><div  v-for="formItem in jsonExample" :key="formItem.id"><!--單行文本--><cbf-form-item v-if="formItem.fieldType == 1 || formItem.fieldType == 4":label="formItem.fieldName" :rules="requiredRules(formItem)"><cbf-inputstyle="width: 205px"placeholder="請輸入內容"v-model="formItem.fieldValue"@blur="inputBlurHandler(formItem)"></cbf-input></cbf-form-item><!--日期--><cbf-form-item  v-if="formItem.fieldType == 2"  :label="formItem.fieldName":rules="requiredRules(formItem)"><cbf-date-pickerstyle="width: 205px"type="date"placeholder="請選擇"v-model="formItem.fieldValue":picker-options="getPickerOptions(formItem)"format="yyyy-MM-dd"value-format="yyyy-MM-dd"></cbf-date-picker></cbf-form-item><!-- 時間 --><cbf-form-itemv-if="formItem.fieldType == 3" :label="formItem.fieldName":rules="requiredRules(formItem)"><cbf-date-pickerstyle="width: 205px"type="datetime"placeholder="請選擇"v-model="formItem.fieldValue":picker-options="getPickerOptions(formItem)"format="yyyy-MM-dd HH:mm:ss"value-format="yyyy-MM-dd HH:mm:ss"></cbf-date-picker></cbf-form-item><!-- 單選下拉框 --><cbf-form-itemv-if="formItem.fieldType == 5" :label="formItem.fieldName"                 :rules="requiredRules(formItem)" ><cbf-selectclass="row-select"v-model="formItem.fieldValue"@change="selectChange(formItem)"  filterable clearable><cbf-option:key="option.label"v-for="option in formItem.selectoptions":value="option.value":label="option.label"></cbf-option></cbf-select></cbf-form-item></div></div>

4.必填項驗證 及別的驗證(金額)

1.驗證動態的框是不是必填項 在computed寫computed: {requiredRules() {return (formItem) => {if (formItem.isRequired) {return [{ required: true, message: "", trigger: "blur" }];} else {return null;}};},}2.因為有個需求是 如果類型為4代表是輸入框也是金額 所以不能輸入漢字const numTwoDecimals = /^([0-9]|[1-9]\d+)(\.\d{1,2})?$/;  數字保留2位小數inputBlurHandler(item){if (item.fieldType == 4 &&item.fieldValue != null &&item.fieldValue != "") {if (!numTwoDecimals.test(item.fieldValue)) {this.$msgTip(`${item.fieldName}金額格式不正確`);}}}3.還有個需求是 類型為2和3 如果并且fieIdName為XX日期  需要有以下判斷比如 新增，限制日期為當天之后，如果是修改，限制日期為回顯XX日期之后getPickerOptions(item) {let picker = {};if ((item.fieldType == 2 || item.fieldType == 3) &&item.fieldName == "承諾還款日期") {picker = {disabledDate(time) {return time.getTime() < Date.now() - 8.64e7;},};} else {picker = {};}return picker;},

5.還有一個要處理的邏輯是? 不是后端返的下拉框數據 而是通過接口拿得 如何放到對應的動態向下拉框數據源

1.請求(a,b,c為接口名字)const requests=[a([this.addCaseForm.customerId]),b([this.addCaseForm.customerId]),c([this.addCaseForm.customerId]),];this.customerHandList = this.transitionData(result[0].data);this.productTypeList = this.transitionData(result[1].data);this.customerAreaList = this.transitionData(result[2].data);2.transitionData 對數據進行處理  2-1  因為接口返回的是這種結構[1,2,3] 所以又對此封裝了一下transitionData(data) {var arr = [];arr = data.map((item) => {return {...item,label: item.val,value: item.val,};});return arr;},2-2  如果接口返回的是正常下拉框數據格式[{label:'',value:''}]就不需要再次封裝了直接進行賦值即可

6.因為我這個是新增和修改都涉及到了? 所以后端返回的格式非常重要?
??????

? 在此新增的時候? 返回的數據里的fieIdValue為v-model綁定的值為空?在編輯的時候? 返回的數據里的fieIdValue為回顯的值點擊保存的時候 直接把這個數組傳給后臺 這樣省了前端組裝數據格式