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 下拉框绑定的数据源是 selectoptions3.具体代码如下
<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为回显的值点击保存的时候 直接把这个数组传给后台 这样省了前端组装数据格式
 - Linux内核网络基础)