@mc20230601/filter-form
v0.1.4
Published
这是一个带有表单组相互关联功能的数据驱动表单
Downloads
14
Readme
表单数据 (FormSchema)
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :-------- | :--------------------------------------------- | :----- | :---------------- | :------ |
| mode | 表单状态 | String | add/edit/readOnly | 'add' |
| groups | 存放 表单组数据
的数组 (Array<GrouopItem>
) | Array | — | — |
| formSize | 表单的所有输入框尺寸 | String | medium/small/mini | 'small' |
| lineSpace | 输入框的行间距 px
| Number | — | 22 |
| rules? | 验证规则 | Object | — | — |
表单事件 (FormSchema)
| 参数 | 说明 | 参数 |
| :------- | :----------------------------------------------------- | :--------------------------------------------- |
| onLoad? | mode
为edit
编辑模式时才会生效,获取初始化数据的方法 | () => Promise< Record< string, any > >
|
| onSubmit | 提交表单触发的函数 | (state: any) => Promise<Record<string, any>>
|
表单组数据 (GrouopItem)
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :------------ | :-------------------------------------------- | :------- | :----- | :----- |
| key | 暂时无用 | String | — | — |
| name | 表单组的标题 | String | — | — |
| visible | 表单组是否显示 | Booolean | — | false |
| items | 表单组内包含的 输入框数据 (Array<FormItem>
) | Array | — | — |
| relevanceKey? | 关联表单组的标识 | String | — | — |
表单组数据 (FormItem)
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :----------------- | :----------------------------------------------------------- | :------------------- | :----------------------------------------------------------- | :------ |
| relevance? | 是否存在关联 | Boolean | — | false |
| type | 输入框的种类 | String | input/textarea/select/multiple-select/checkbox/radio-group | 'input' |
| subItemType? | 输入框子种类 | String | — | — |
| label | 输入框的标题 | String | — | — |
| prop | 输入框数据对应的prop
字段 | String | — | — |
| span? | 输入框在 24格栅格化
的行内占几格 | Number | — | 8 |
| required? | 是否必填 | Boolean | — | false |
| default? | 默认值 | String/Array/Boolean | — | — |
| placeholder? | placeholder
只有输入框类型的输入框生效 | String | — | — |
| disabled? | 是否只读 | Boolean | — | false |
| datePickerOptions? | 时间选择器的配置项 (DatePickerOptions
) | Object | — | — |
| switchOptions? | switch
的配置项 (SwitchOptions
) | Object | — | — |
| options? | 下拉框等种类选择器的选项数据;如果参数类型为Function
,则会自动执行获取抛出的数据(Array<OptionsItem>/Function
) | Array/Function | — | — |
| collapseTags? | 下拉框多选时特殊字段:是否将多个选项值合并为数字显示 | Boolean | — | false |
| border? | checkbox
的选项是否带边框 | Boolean | — | false |
| justifyContent? | checkbox
/switch
的选项水平排列方式 | String | start/center/end/around(checkbox
)/between(checkbox
) | 'start' |
下拉框等其他类型选择器的选项数据 (OptionsItem)
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :------------ | :----------------------------------------------------------- | :------- | :----- | :----- |
| value | 值 | String | — | — |
| label | 标题 | String | — | — |
| disabled? | 选项是否禁止选中 | Booolean | — | false |
| relevanceKey? | 关联表单组的标识 (在表单组数据中的relevance
为true
时生效,和表单组数据中的relevanceKey
对应) | String | — | — |
switch
的配置数据 (SwitchOptions)
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :------------- | :----------- | :----- | :----- | :----- | | activeColor? | 打开时的颜色 | String | — | — | | inactiveColor? | 关闭时的颜色 | String | — | — | | activeText? | 打开的文字 | String | — | — | | inactiveText? | 关闭的文字 | String | — | — |
日期选择器的配置数据 (DatePickerOptions)
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :---------------- | :--------------------- | :----------- | :---------------- | :----- | | align? | 内容对齐方式 | String | left/center/right | left | | defaultTime? | 默认值 | String/Array | — | — | | valueFormat? | 日期格式 | String | — | — | | pickerOptions? | 快捷选项配置 | Object | — | {} | | placeholder? | 单独选择框默认值 | String | — | — | | startPlaceholder? | 多选选择框默认开始时间 | String | — | — | | endPlaceholder? | 多选选择框默认结束时间 | String | — | — | | rangeSeparator? | 连接符 | String | — | '-' |