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-input
style="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-picker
style="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-item
v-if="formItem.fieldType == 3" :label="formItem.fieldName"
:rules="requiredRules(formItem)">
<cbf-date-picker
style="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-item
v-if="formItem.fieldType == 5" :label="formItem.fieldName"
:rules="requiredRules(formItem)" >
<cbf-select
class="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为回显的值
点击保存的时候 直接把这个数组传给后台 这样省了前端组装数据格式