e-label-prop

分组样式插槽

• label-prop - 属性
• item - 属性
• UI - 示例

描述

1. 可以通过 category 分组功能实现 标签项切换
2. 可以通过配置 wrapperClass padding labelWidth、labelClass labelSuffix propClass border align属性实现不同标签样式
3. 通过配置 schema 构成标签项

属性

<i-props> Props

参数名	描述	类型	默认值
category	过滤 schema	string	-
schema	字段列表	any[]	-
assign	扩展 schema 数据	any[]	-
entity	字段数据	any[] | object	-
reverse	entity 为数组时是否倒置	boolean	false
remote	是否获取字典	boolean	false
dicts	自定义的字典键值对	Record<string, any>	-
model-value (v-model)	批注的数据	any[]	-
label-suffix	标签后缀 例如增加 ：	string	-
padding	内边距 不能设置默认值	string	-
wrapper-class	字段行样式	string	w-1/3
label-width	标签宽度	string	120px
label-class	标签类样式	string	bg-gray-50
prop-class	属性类样式	string	-
border	是否边框	boolean	false
align	对齐方式	string	center

entity

1. 支持对象和数组
2. 如果是数组则重复渲染

wrapperClass 行样式

1. 组件中wrapperClass="w-1/3" 为全局样式设置，所有标签都为3列展示
2. schema中wrapperClass: 'w-1/2' 为局部样式设置，设置的标签为2列展示
3. 优先级 : schema.wrapperClass > props.wrapperClass

高阶用法

1. 默认 wrapperClass: 'red-data-value-0'
2. 自定义样式 data-value-hash

padding 间距

label-class

label-suffix 标签后缀

border 边框

无边框样式

item 属性

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

常用属性

1. label 标签文本
2. prop 字段名（实体的键名）
3. slot 插槽
4. category 分组
5. adaptor 适配器，目前支持 input textarea tag date
6. typeof 数据格式化

category

需要配置一下内容

1. 组件属性的category
2. schema 项中的 category

typeof 按组件类型默认格式化

应用场景

1. 日期

slot 插槽

adaptor

1. 多行文本 { adaptor: 'input', type: 'textarea', rows: 7 }
2. 多行文本 { adaptor: 'textarea' }

UI 示例

labelAppend

附件列表

插槽

渲染页脚内容

纯 css 编写对照