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

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