基于 el-form 封装一个依赖 json 动态渲染的表单控件( 四 )

遍历子控件因为子控件都封装好了,所以只需要简单遍历即可:
<el-form:model="formModel":rules="rules"ref="formControl":inline="false"class="demo-form-inline"label-suffix=":"label-width="130px"size="mini"><el-row><!--不循环row,直接循环col,放不下会自动往下换行 。--><el-colv-for="(ctrId, index) in formColSort":key="'form_'+index":span="formColSpan[ctrId]"><!--:prop="getCtrMeta(ctrId).colName"--><el-form-item:label="getCtrMeta(ctrId).label":prop="getCtrMeta(ctrId).colName"><!--判断要不要加载插槽--><template v-if="getCtrMeta(ctrId).controlType === 1"><!--<slot :name="ctrId">父组件没有设置插槽</slot>--><slot :name="getCtrMeta(ctrId).colName">父组件没有设置插槽</slot></template><!--表单item组件,采用动态组件的方式--><template v-else><component:is="dictControl[getCtrMeta(ctrId).controlType]"v-model="formModel[getCtrMeta(ctrId).colName]"v-bind="getCtrMeta(ctrId)"@my-change="myChange"></component></template></el-form-item></el-col></el-row></el-form>篇幅有限无法一一介绍,其他部分可以看源码 。
源码https://gitee.com/naturefw/nf-vite2-element

【基于 el-form 封装一个依赖 json 动态渲染的表单控件】


推荐阅读