Vue+ElementUI实现输入框日期框下拉框动态展示

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为回显的值

  点击保存的时候 直接把这个数组传给后台 这样省了前端组装数据格式