d-tree-form

v1.1.3

Published

3 years ago

[![Build Status](https://travis-ci.org/deepexi/d-tree-form.svg?branch=master)](https://travis-ci.com/deepexi/d-tree-form) [![NPM Download](https://badgen.net/npm/dm/d-tree-form)](https://www.npmjs.com/package/d-tree-form) [![NPM Version](https://badgen.ne

Downloads

0High
0Medium
0Low

snowlocked

vue sfc component

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 优先。 | | ... | | | | | |