动态生成表单

用法（来源于官网）

<!-- 动态组件由 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"@timeChoose="handleChange"><component :is="field.typeOfChild"v-for="(item,index) in field.options":key="index":value="item.value":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: '组织名称',      //labelpropName: 'orgName',    //参数名称placeholder: '请输入',   //placeholdertypeOfChild: null,    //子组件的类型options: null     //select组件下的option组件的取值}, {id: 21,type: 'RangeDatePicker',//这是自定义组件label: '创建日期',defaultValue: '',model: '',propName: 'cjrq',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 === 'cjrq') {item.model = date}})this.timeType = type}}}
</script><style lang="scss" scoped>
</style>

结果