e-form

字典样式表单权限组合插槽

• form - 属性
• item - 属性
• UI - 示例

描述

1. 通过 adaptor 适配器 实现各自表单组件
2. 通过配置 schema 构成表单项
3. 通过修改 assign 值动态修改表单项
4. 可以通过 category 分组功能实现 表单项切换
5. 通过定义 remote dict dictURL 实现自动适配字段，同时也可以通过配置 dicts 自定义字典内容。
6. 可以通过配置 itemClass labelWidth propWidth、border plain 属性实现不同样式
7. 通过 has readonly disabled 控制表单权限

form 属性

<i-form-props> Props

参数名	描述	类型	默认值
prop	表单属性名称	string	undefined
adaptor	适配器名称，默认值为 'old'	string	'old'
remote	是否从远端获取字典数据，默认值为 false	boolean	false
dicts	字典数据，默认值为一个空对象 ({})	Record<string, any>	{}
model-value (v-model)	表单的值，默认值为一个空对象 ({})	Record<string, any>	{}
category	分类名称，过滤 schema 数据	string	undefined
schema	表单数据结构 默认值为一个空数组 ([])	any[]	[]
assign	schema 拓展，默认值为一个空数组 ([])	any[]	[]
show-message	是否显示校验错误信息 false	boolean	false
inline-message	是否以行内形式展示校验信息	boolean	true
button-list	底部按钮列表	any[]	[]
button-list-class	按钮样式	string	'flex flex-row el-form-item ml-2 items-center'
has	表单权限	string	undefined
readonly	是否只读，默认值为 false	boolean	false
disabled	是否禁用，默认值为 false	boolean	false
item-class	表单项类	string	'w-1/3'
label-width	标签宽度，默认为空，单行紧凑模式显示	number | string	undefined
prop-width	属性宽度	number	undefined
size	组件尺寸 '' | 'large' | 'default' | 'small'	string	undefined
clearable	是否可清空，默认值为 true	boolean	true
border	是否显示边框，默认值为 false	boolean	false
plain	是否只读不渲染，默认值为 false	boolean	false

has

1. 权限等级 disabled > has
2. 权限等级 has > assign > schema

append

precision 取位

1. 可以无限输入，失去焦点后进行取位
2. 会进行进位处理: 四舍五入

formatter/parser 格式化

1. 可以阻止输入

h 自定义渲染

采用 import { h } from 'vue' 中的渲染方式

plain 不以组件方式渲染，只做文本显示

字段中的配置 plain 直接生效 组件属性 配置了 plain 只有再只读的情况下才能生效

rule-validate 表单验证

buttonList 按钮列表

schema-item 表单项属性

const schema = [ {label: '', prop: '',  }, {label: '', prop: '',  } ]

常用属性

1. label 标签文本
2. prop 字段名（实体的键名）
3. class (wrapperClass) 行样式
4. labelClass 标签样式
5. propClass 属性样式
6. adaptorClass 适配器的样式
7. labelWidth 标签宽度
8. propWidth 属性宽度
9. has readonly disabled 字段项权限
10. default 默认值
11. slot 插槽
12. labelSlot 标签插槽
13. wrapperSlot 行插槽
14. components 不渲染 label 标签
15. formItemList 渲染方式带有 label 标签
16. 等各自组件相关属性

default 默认值

slot 属性插槽

wrapperSlot 行插槽

labelSlot 标签插槽

标签自定义渲染方式

自定义每个标签

formItemList

components

UI - 示例

自定义样式

通过增加类修改原样式，实现左侧标签效果 比如：biz-form

圆\经纬度

布局：空白/占位

表单嵌套 components formItemList

分组表单（多个e-form）