Skip to content

Latest commit

 

History

History
217 lines (176 loc) · 11.1 KB

README.md

File metadata and controls

217 lines (176 loc) · 11.1 KB

d-tree-form

Build Status NPM Download NPM Version NPM License PRs Welcome Automated Release Notes by gren

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

Table of Contents

Introduction

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

⬆ Back to Top

Features

  1. 目前支持 input,textarea,select 三种表单项
  2. type=select 时支持多层子节点
  3. 目前仅支持 required 的校验规则

Data Structure

Demo

image.png

[
  {
    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
基本用法:
image.png
常用字段

参数 类型 说明 必须 默认值 备注
type String 校验的类型 string image.png
required Boolean 是否必填 false true 是在表单项前面会有一个星
message String 校验不通过提示语 -
pattern String 校验正则 - 正则校验使用字符串形式,因为 JSON 中不支持存储正则表达式类型
trigger String 验证触发方式 change blur 失去焦点时
change 改变值时
min Number 最小长度
max Number 最大长度
len Number 最大长度 如果 len 属性与最小和最大范围属性组合,则 len 优先。
...

更多高级用法  https://github.com/yiminghe/async-validator

⬆ Back to Top

Links

⬆ Back to Top

Install

⬆ Back to Top

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.

⬆ Back to Top

Contributors

Thanks goes to these wonderful people (emoji key):

DeepenLau
DeepenLau

This project follows the all-contributors specification. Contributions of any kind welcome!

⬆ Back to Top

License

MIT

⬆ Back to Top