🚀 优质资源分享 🚀
学习路线指引(点击解锁) | 知识定位 | 人群定位 |
---|---|---|
🧡 Python实战微信订餐小程序 🧡 | 进阶级 | 本课程是python flask+微信小程序的完美结合,从项目搭建到腾讯云部署上线,打造一个全栈订餐系统。 |
💛Python量化交易实战💛 | 入门级 | 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统 |
前面说了列表的低代码化的方法,本篇介绍一下表单的低代码化。
内容摘要
- 需求分析。
- 定义 interface。
- 定义表单控件的 props。
- 定义 json 文件。
- 基于 el-form 封装,实现依赖 json 渲染。
- 实现多列、验证、分栏等功能。
- 使用 slot 实现自定义扩展。
- 自定义子控件。(下篇介绍)
- 表单子控件的设计与实现。(下篇介绍)
- 做个工具维护 json 文件。(下下篇介绍)
需求分析
表单是很常见的需求,各种网页、平台、后台管理等,都需要表单,有简单的、也有复杂的,但是目的一致:收集用户的数据,然后提交给后端。
表单控件的基础需求:
- 可以依赖 JSON 渲染。
- 依赖 JSON 创建 model。
- 便于用户输入数据。
- 验证用户输入的数据。
- 便于程序员实现功能。
- 可以多列。
- 可以分栏。
- 可以自定义扩展。
- 其他。
el-form 实现了数据验证、自定义扩展等功能(还有漂亮的UI),我们可以直接拿过来封装,然后再补充点代码,实现多列、分栏、依赖 JSON 渲染等功能。
设计 interface
首先把表单控件需要的属性分为两大类:el-form 的属性、低代码需要的数据。
表单控件需要的属性的分类
整理一下做个脑图:
表单控件的接口
我们转换为接口的形式,再做个脑图:
然后我们定义具体的 interface
IFromProps:表单控件的接口 (包含所有属性,对应 json 文件)
/**
* 表单控件的属性
*/
export interface IFromProps {
/**
* 表单的 model,对象,包含多个字段。
*/
model: any,
/**
* 根据选项过滤后的 model,any
*/
partModel?: any,
/**
* 表单控件需要的 meta
*/
formMeta: IFromMeta,
/**
* 表单子控件的属性,IFormItem
*/
itemMeta: IFormItemList,
/**
* 标签的后缀,string
*/
labelSuffix: string,
/**
* 标签的宽度,string
*/
labelWidth: string,
/**
* 控件的规格,ESize
*/
size: ESize,
/**
* 其他扩展属性
*/
[propName: string]: any
}
- model:表单数据,可以依据 JSON 创建。
- partModel:组件联动后,只保留可见组件对应的数据。
- formMeta:低代码需要的属性集合。
- itemMeta:表单子控件需要的属性集合。
- 其他:el-table 组件需要的属性,可以使用 $attrs 进行扩展。
本来想用这个接口约束组件的 props,但是有点小问题:
- 如果用 Option API 的话,不支持这种形式的接口。
- 如果使用 Composition API 的话,虽然支持,但是只能在组件内部定义 interface,暂时不支持从外部文件引入。
接口文件应该可以在外部定义,然后引入组件。如果不能的话,那就尴尬了。
所以只好暂时放弃对组件的 props 进行整体约束。
IFromMeta:低代码需要的属性接口
/**
* 低代码的表单需要的 meta
*/
export interface IFromMeta {
/**
* 模块编号,综合使用的时候需要
*/
moduleId: number | string,
/**
* 表单编号,一个模块可以有多个表单
*/
formId: number | string,
/**
* 表单字段的排序、显示依据,Array,
*/
colOrder: Array,
/**
* 表单的列数,分为几列 number,
*/
columnsNumber: number
/**
* 分栏的设置,ISubMeta
*/
subMeta: ISubMeta,
/**
* 验证信息,IRuleMeta
*/
ruleMeta: IRuleMeta,
/**
* 子控件的联动关系,ILinkageMeta
*/
linkageMeta: ILinkageMeta
}
- moduleId 模块编号,以后使用
- formId 表单编号,一个模块可以有多个表单
- colOrder 数组形式,表单里包含哪些字段?字段的先后顺序如何确定?就用这个数组。
- columnsNumber 表单控件的列数,表