vue2+el 动态表单

这里只单纯的使用哈，复杂的可以自己在这里原基础做修改和添加，开冲吧

<template>
  <div class="top_from_select" ref="top_from_select">
    <el-form ref="form" :model="form" label-width="80px">
      <div  v-for="(item,index) in view_form_list"
            :key="index"
            class="form_item_one">
        <el-form-item :label="item.label"
                      :prop="item.key"
                      :rules="item.rules" >
          <div v-if="item.type==='Input_Text'||item.type==='Input_Password'">
            <el-input :placeholder="item.placeholder"
                      :name="item.key"
                      :show-password="item.type==='Input_Password'"
                      v-model="item.value"
                      :disabled="item.disables?true:false" ></el-input>
          </div>
          <div v-else-if="item.type==='Input_Number'">
            <el-input :placeholder="item.placeholder"
                      :name="item.key"
                      :min="item.min"
                      :max="item.max"
                      v-model="item.value"
                      :disabled="item.disables?true:false"
                      type="number"
            ></el-input>
          </div>
          <div v-else-if="item.type==='Input_Textarea'">
            <el-input :placeholder="item.placeholder"
                      :name="item.key"
                      v-model="item.value"
                      :disabled="item.disables?true:false"
                      type="textarea"
            ></el-input>
          </div>
          <div v-else-if="item.type==='Select'">
            <el-select
              v-model="item.value"
              :multiple="item.multiple"
              filterable
              allow-create
              default-first-option
              @change="update_change($event,item.key)"
              :name="item.key"
              :placeholder="item.placeholder">
              <el-option
                v-for="item_select in item.list"
                :key="item_select.value"
                :label="item_select.label"
                :value="item_select.value">
              </el-option>
            </el-select>
          </div>
          <div v-else-if="item.type==='Checkbox'">
            <el-checkbox-group
              @change="update_change($event,item.key)" :disabled="item.disables?true:false"
                               v-model="item.value">
              <el-checkbox v-for="item_checkbox in item.list"
                           :key="item_checkbox.value"
                           :label="item_checkbox.value"
                           :name="item.key">{{item_checkbox.label}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <div v-else-if="item.type==='Radio'">
            <el-radio-group
              @change="update_change($event,item.key)" :disabled="item.disables?true:false"
                               v-model="item.value">
              <el-radio v-for="item_checkbox in item.list"
                           :key="item_checkbox.value"
                           :label="item_checkbox.value"
                           :name="item.key">{{item_checkbox.label}}</el-radio>
            </el-radio-group>
          </div>

          <div v-else-if="item.type==='TimePicker'
                        ||item.type==='DatePicker'
                        ||item.type==='DateTimePicker'
                        ||item.type==='DatesPicker'
                        ||item.type==='WeekPicker'
                        ||item.type==='MonthPicker'
                        ||item.type==='YearPicker'
                        ||item.type==='TimePicker_end'
                        ||item.type==='DatePicker_end'
                        ||item.type==='MonthPicker_end'
                        ||item.type==='DateTimePicker_end'
">
            <el-time-select
              v-if="item.type==='TimePicker'"
              @change="update_change($event,item.key)"
              v-model="item.value"
              :name="item.key"
              :picker-options="{ start: '08:30',step: '00:15',end: '18:30'}"
              :placeholder="item.placeholder">
            </el-time-select>
            <el-date-picker
              v-if="item.type==='DatePicker'
              ||item.type==='DatesPicker'
              ||item.type==='WeekPicker'
              ||item.type==='MonthPicker'
              ||item.type==='YearPicker'"
              @change="update_change($event,item.key)"
              v-model="item.value"
              :name="item.key"
              :type="(item.type.substring(0,item.type.indexOf('Picke'))).toLowerCase()"
              :placeholder="item.placeholder">
            </el-date-picker>
            <el-date-picker
              v-if="item.type==='DateTimePicker'"
              @change="update_change($event,item.key)"
              v-model="item.value"
              type="datetime"
              :name="item.key"
              :placeholder="item.placeholder"
              align="right"
              :picker-options="pickerOptions">
            </el-date-picker>
            <el-time-picker
              v-if="item.type==='TimePicker_end'"
              is-range
              @change="update_change($event,item.key)"
              v-model="item.value"
              :name="item.key"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :placeholder="item.placeholder">
            </el-time-picker>
            <el-date-picker
              v-if="item.type==='DatePicker_end'
              ||item.type==='DatesPicker_end'
              ||item.type==='MonthPicker_end'
              ||item.type==='DateTimePicker_end'"
              :type="(item.type.substring(0,item.type.indexOf('Picke'))).toLowerCase()+'range'"
              @change="update_change($event,item.key)"
              v-model="item.value"
              :name="item.key"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :placeholder="item.placeholder">
            </el-date-picker>
          </div>

        </el-form-item>
      </div>
      <el-form-item class="submit_item">
        <div>
          <el-button v-if="reset" @click="resetForm('form')">重置</el-button>
          <el-button class="submit_class" type="primary" @click="submitForm('form')">查询</el-button>
        </div>

      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  /**
   *配置信息
   *
   **/
  export default {
    name: "top_from_select",
    props: {
      //列表数据
      form_list: {
        type: [Array],
        default: {
          return: [],
        }
      },
      //是否显示重置按钮
      reset:{
        type: [Boolean],
        default: {
          return: false,
        }
      },

    },
    data() {
      return {
        dom_width: 0,//元素的宽度
        view_form_list:[],
        form: {},//表单绑定对象
        //日期时间快捷键
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        }
      }
    },
    watch:{
      //监听列表变化
      form_list(new_val,old_val){
        this.mounted_view_update(new_val);
        this.view_form_list=new_val;
      },

    },
    created() {
      this.mounted_view_update(this.form_list);
      this.view_form_list=this.form_list;
    },
    mounted() {
      var that = this;
      this.$nextTick(() => {
        that.dom_width = that.$refs.top_from_select.offsetWidth;
        //监听输入框的数据变化
        that.$refs.top_from_select.addEventListener('change',function(e){
          that.mounted_view_update(that.view_form_list);
        })
      })
    },
    methods:{
      mounted_view_update(data){
        data.forEach((item,index)=>{
          if(item.type==='InputNumber'){//处理数值的大小限制(注意：这里主要是输入框number的bug失去焦点的时候没有恢复到最小最大值)
            var number_val=parseInt(item.value)>parseInt(item.max)?item.max:parseInt(item.value)<parseInt(item.min)?item.min:item.value;
            this.$set(this.form,item.key,number_val);
            if(this.view_form_list&&this.view_form_list.length>0){
              this.$set(this.view_form_list[index],'value',number_val);
            }
          }else{
            this.$set(this.form,item.key,item.value);
          }
        })
      },
      update_change(val,key){
        this.$set(this.form,key,val);
      },
      submitForm(formName) {
        var that=this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            that.$emit('submit',that.form);
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped lang="scss">
  .top_from_select {
    height: 100%;
    overflow-y: auto;
    padding-right: 150px;
    position: relative;
    .form_item_one {
      vertical-align:top;
      display: inline-block;
      padding-right: 20px;
    }
  }
  /deep/ input[type="number" i] {
    padding: 1px 2px !important;
  }
  /deep/ .el-textarea__inner{
    max-height: 300px !important;
    height: 33px !important;
  }
  /deep/ .el-form-item__label{
    text-align: left !important;
    height: 35px !important;
    line-height: 35px !important;
  }
  /deep/ .el-form-item__content{
    height: 35px !important;
    line-height: 35px !important;
  }
  .submit_item{
    position: absolute;
    right: 0px;
    top: 0px;
    text-align: right;
  }
  /deep/ .el-input__inner{
    height: 33px !important;
    line-height: 33px;
  }
  .submit_class{
    padding: 8px 20px;
  }
</style>

组件使用

 <top_from_select @submit="select_from" :reset="false" :form_list="select_form_list" ></top_from_select>

这里大概数据结构和类型表单验证可以去el看一下使用方式

 select_form_list:[
              {
                type:"Input_Text",//正常输入框 Input_Text 或者 Input_Password 密码框
                key:"input_box",
                label:"输入内容",
                disables:false,
                placeholder:"请输入",
                value:"我有个默认值",
                rules:[{
                  required:true,//是否开启非空验证
                  message:"请输入内容",//非空提示内容
                  trigger:'blur',
                }]
              },
              {
                type:"Input_Number",//输入数字的
                key:"InputNumber",//返回内容
                label:"输入数字",//标签
                disables:false,
                placeholder:"请输入",
                value:"0",//默认值
                min:"0",//最小值
                max:"100",//最大值
                rules:[
                  {
                  required:true,//是否开启非空验证
                  message:"请输入值",//非空提示内容
                  trigger:'blur',
                  }
                ]
              },
              {
                type:"Input_Textarea",//输入数字的
                key:"Input_Textarea",//返回内容
                label:"输入数字",//标签
                disables:false,
                placeholder:"请输入",
                value:"0",//默认值
                min:"0",//最小值
                max:"100",//最大值
                rules:[
                  {
                    required:true,//是否开启非空验证
                    message:"请输入值",//非空提示内容
                    trigger:'blur',
                  }
                ]
              },
              {
                type:"Select",//输入数字的默认单选
                key:"Select",//返回内容
                label:"输入数字",//标签
                disables:false,
                placeholder:"请选择",
                multiple:false,//是否多选
                list:[
                  {
                    value: 'HTML1',
                    label: 'HTML11111'
                  },
                  {
                    value: 'HTML2',
                    label: 'HTML2222'
                  },
                ],
                value:'',//Select默认值设为数组 开启多选[],单选""空字符串
                rules:[{
                  required:true,//是否开启非空验证
                  message:"请选择内容",//非空提示内容
                  trigger:'blur',
                }]
              },
              {
                type:"Checkbox",//多选
                key:"Checkbox",//返回内容
                label:"请选择",//标签
                disables:false,
                value:[],//默认选择值多选都为[],
                list:[
                  {
                    value: 'HTML1',
                    label: 'HTML11111'
                  },
                  {
                    value: 'HTML2',
                    label: 'HTML2222'
                  },
                ],//列表数据
                rules:[{
                  required:true,//是否开启非空验证
                  message:"请选择内容",//非空提示内容
                  trigger:'blur',
                }]
              },
              {
                type:"Radio",//多选
                key:"Radio",//返回内容
                label:"请选择",//标签
                disables:false,
                value:'',//默认选择值,
                list:[
                  {
                    value: 'HTML1',
                    label: 'HTML11111'
                  },
                  {
                    value: 'HTML2',
                    label: 'HTML2222'
                  },
                ],//列表数据
                rules:[{
                  required:true,//是否开启非空验证
                  message:"请选择内容",//非空提示内容
                  trigger:'blur',
                }]
              },
              {
                type:"DateTimePicker_end",
                //TimePicker//时间，
                // DatePicker，//日期
                // DatesPicker，//多个日期
                // WeekPicker，//周
                // MonthPicker，//月份
                // YearPicker，//年份
                // DateTimePicker
                // 日期时间选择器,
                // 后缀加上_end显示开始和结束选择 周和年不可用（如：DateTimePicker_end）
                key:"TimePicker",//返回内容
                label:"时间控件",//标签
                disables:false,
                placeholder:"请选择时间",
                value:'',//默认选择值,
                rules:[{
                  required:true,//是否开启非空验证
                  message:"请选择时间",//非空提示内容
                  trigger:'blur',
                }]
              }
            ]

查询回调触发，改请求接口就请求，做自己业务逻辑哈

  select_from(data){
     console.log(data);
   }