遍历子控件因为子控件都封装好了,所以只需要简单遍历即可:
<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 动态渲染的表单控件】
推荐阅读
- 不要再封装各种Util工具类了,这个神级框架值得拥有
- UDP协议以及基于UDP的网络通讯程序
- 基于ELK一次集群实战
- 安卓|36个月不卡!ColorOS 13首曝:基于Android 13深度定制
- 基于Python获取股票分析,数据分析实战
- python 手把手教你基于搜索引擎实现文章查重
- 真的够可以的,基于Netty实现了RPC框架
- 软件测试工具monkeyrunner基于python脚本开发
- 微信正在用的深度学习框架开源!支持稀疏张量,基于C++开发
- 开发人员如何快速定制化实现一个基于Solr的搜索引擎