vue+element中动态组件component的使用

动态生成表单

用法（来源于官网）

<!-- 动态组件由 vm 实例的 `componentId` property 控制 -->
<component :is="componentId"></component>

<!-- 也能够渲染注册过的组件或 prop 传入的组件 -->
<component :is="$options.components.child"></component>

prop（来源于官网）

• is - string | ComponentDefinition | ComponentConstructor

• inline-template - boolean

具体应用

• 这里每个div.form-item是根据fields动态生成的表单块,这里的表单主要有input类型的、textarea类型的、select类型的、date类型的等等。
• 我目前的需求是input类型、select类型、和时间选择类型的居多，因为select下面肯定是有option组件，所以我这里采用两级来动态生成组件
• @timeChoose="handleChange这里用来处理二次封装的时间选择组件改变值时候的处理函数，其他的使用了element的组件的不需要这个方法
• 自定义子组件RangeDatePicker 代码内容在这里不做展示了

<template>
	 <div v-for="field in fields"
	           :key="field.id"
	           class="form-item">
	        <el-form-item :label="field.label">
	          <component :is="field.type"
	                     :ref="field.propName+'Ref'"
	                     v-model="field.model"
	                     size="mini"
	                     :placeholder="field.placeholder"
             			 :proper-name="field.propName"
	                     @timeChoose="handleChange">
		            <component :is="field.typeOfChild"
		                       v-for="(item,index) in field.options"
		                       :key="index"
		                       :value="item.value"
             					 :proper-name="field.propName"
		                       :label="item.name"
		                       @timeChoose="handleChange" />
		          </component>
	        </el-form-item
	</div>
	<button @click="submitFilter">筛选</button>
</template>

<script>
//自定义组件引入
import RangeDatePicker from '@/components/RangeDatePicker/index.vue'
export default {
  name: 'OrganizationFilter',
  components: { RangeDatePicker },
  data() {
    return {
      fields: [{
        id: 10,//唯一标识
        type: 'el-input',   //组件名
        model: '',  //绑定的值
        defaultValue: '',    //默认值
        label: '组织名称',      //label
        propName: 'orgName',    //参数名称
        placeholder: '请输入',   //placeholder
        typeOfChild: null,    //子组件的类型
        options: null     //select组件下的option组件的取值
      }, {
        timeType: '',
        isShow: true,
        label: '创建日期',
        defaultValue: '',
        model: '',
        propName: 'createTime',
        componentType: 'range',
        typeOfChild: null,
        placeholder: '选择日期',
        options: null
      }, {
        id: 22,
        type: 'el-select',
        label: '状态',
        defaultValue: '',
        model: '',
        propName: 'zt',
        typeOfChild: 'el-option',
        options: [{ name: '全部', value: '' }, { name: '启用', value: 1 }, { name: '封存', value: 0 }]
      }]
    }
  },
  methods: {
    handleParams() {
      this.fields.forEach(elem => {
        if (elem.propName !== '') this.filterFrom[elem.propName] = elem['model']
      })
      if (this.fields.some(v => v.propName === 'cjrq')) {
        this.filterFrom.timeType = this.timeType
      }
      return this.filterFrom
    },
    // 查询
    submitFilter() {
      this.handleParams()
    },
    // 处理创建日期改变
    handleChange({ date, type }) {
      this.fields.map((item) => {
        if (item.propName === prop) {
          item.model = date
          item.timeType = type
        }
      })
    }
  }

}
</script>

<style lang="scss" scoped>
</style>

结果