D-tree-form NPM

d-tree-form

short description + sample image(png/gif/mp4)

Introduction

一个通过脚手架参数转化成树形动态表单的组件

⬆ Back to Top

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	StringNumberBoolean	字段的值	是	空字符串	-
type	String	该表单项的类型	是		仅支持inputselecttextarea
labelWidth	String	字段中文名的宽度	否
tooltips	String	问号提示语	否
rules	Array	校验规则，详看下面	否
options	Array	下拉框选项，详看下面			type="select"时必填
componentProps	Object	传给表单的属性对象，详看下面	否
children	Array	子节点			每一项和 formitem 属性一致

select options

参数	类型	说明	必须	默认值	备注
label	String	下拉选项的显示值	是	-	-
value	StringNumberBoolean	下拉选项的用于提交的值	是
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 优先。
...