d-tree-form
short description + sample image(png/gif/mp4)
Table of Contents
Introduction
一个通过脚手架参数转化成树形动态表单的组件
Features
- 目前支持 input,textarea,select 三种表单项
- type=select 时支持多层子节点
- 目前仅支持 required 的校验规则
Data Structure
Demo
label: '作者' type: 'input' prop: 'author' value: '' tooltips: 'xxx' componentProps: placeholder: '请输入内容' rules: required: true message: '这是必填' label: '路由' type: 'select' prop: 'router' value: '' options: label: 'mongo' value: 'mongo' label: 'mysql' value: 'mysql' label: 'none' value: 'none' label: '配置中心' type: 'select' prop: 'configCenter' value: '' options: label: 'apollo' value: 'apollo' label: 'none' value: 'none' label: 'APM' type: 'select' prop: 'apm' value: '' options: label: 'skywalking' value: 'skywalking' childNodes: label: 'skywalking Servers地址:' type: 'input' prop: 'skywalkingServers' value: '' labelWidth: '200px' rules: required: true message: '请输入skywalking Servers地址' label: 'skywalking Servers地址2:' type: 'input' prop: 'skywalkingServers2' value: '' labelWidth: '200px' rules: required: true message: '请输入skywalking Servers地址' label: 'none' value: 'none'
form-item props
参数 | 类型 | 说明 | 必须 | 默认值 | 备注 |
---|---|---|---|---|---|
label | String | 字段中文名 | 是 | - | - |
prop | String | 字段的 key,必须唯一 | 是 | - | - |
value | String Number Boolean |
字段的值 | 是 | 空字符串 | - |
type | String | 该表单项的类型 | 是 | 仅支持 input select textarea |
|
labelWidth | String | 字段中文名的宽度 | 否 | ||
tooltips | String | 问号提示语 | 否 | ||
rules | Array | 校验规则,详看下面 | 否 | ||
options | Array | 下拉框选项,详看下面 | type="select"时必填 | ||
componentProps | Object | 传给表单的属性对象,详看下面 | 否 | ||
children | Array | 子节点 | 每一项和 formitem 属性一致 |
select options
参数 | 类型 | 说明 | 必须 | 默认值 | 备注 |
---|---|---|---|---|---|
label | String | 下拉选项的显示值 | 是 | - | - |
value | String Number Boolean |
下拉选项的用于提交的值 | 是 | ||
childNodes | Array | 该 option 子节点 | 否 | 选中该 option 需要子节点时使用,数组的项为 form-item,不支持子节点下还有子节点 |
rules
支持 Element-ui Form 的校验规则,不支持函数校验
参考:https://element.eleme.cn/#/zh-CN/component/form#biao-dan-yan-zheng
基本用法:
常用字段
参数 | 类型 | 说明 | 必须 | 默认值 | 备注 |
---|---|---|---|---|---|
type | String | 校验的类型 | 否 | string | |
required | Boolean | 是否必填 | 否 | false | true 是在表单项前面会有一个星 |
message | String | 校验不通过提示语 | 是 | - | |
pattern | String | 校验正则 | 否 | - | 正则校验使用字符串形式,因为 JSON 中不支持存储正则表达式类型 |
trigger | String | 验证触发方式 | 否 | change | blur 失去焦点时 change 改变值时 |
min | Number | 最小长度 | 否 | ||
max | Number | 最大长度 | 否 | ||
len | Number | 最大长度 | 否 | 如果 len 属性与最小和最大范围属性组合,则 len 优先。 | |
... |
Links
Install
Contributing
For those who are interested in contributing to this project, such as:
- report a bug
- request new feature
- fix a bug
- implement a new feature
Please refer to our contributing guide.
Contributors
Thanks goes to these wonderful people (emoji key):
DeepenLau |
This project follows the all-contributors specification. Contributions of any kind welcome!