属性类型与设置器

组件属性类型与设置器为使用者预设了不同的配置方案，以满足多样的使用需求。属性类型与设置器存在对应的关系，详细介绍如下所示：

面板类型

页签面板

顶部页签切换面板，注意：该配置项只能设置在最外层，通常设置为属性、样式、高级三个页签

{
  "type": "tab",
  "label": "属性",
  "coms": []
}

子面板

子面板配置，点击后会在新的面板展示 coms 中的配置组件

{
  "type": "transfer",
  "label": "子面板",
  "coms": []
}

折叠面板

折叠面板配置，其下的组件配置可以点击展开收起

{
  "type": "collapse",
  "label": "折叠面板",
  "default": "open",
  "coms": []
}

分组面板

将某几项配置进行分组并列展示时

{
  "type": "grid",
  "label": "",
  "coms": []
}

基础类型

输入框

文本类型组件的常见样式，可进行常规的文本输入。

{
  "type": "input",
  "col": "",
  "label": "",
  "props": {}
}

props 支持设置如下属性：

• addonAfter: string 后置标签
• addonBefore: string 前置标签
• disabled: true/false 是否禁用
• placeholder: string 占位提示

数字输入框

数字输入类型组件的常见样式，可进行常规的数字输入。

{
  "type": "inputNumber",
  "col": "",
  "label": "",
  "props": {}
}

props 支持设置如下属性：

• addonAfter: string 后置标签
• addonBefore: string 前置标签
• min: number 最小值
• max: number 最大值

单选钮

选项类组件配置，可切换不同的选项

{
  "type": "radio",
  "col": "",
  "label": "",
  "props": {
    "options": [
      {
        "key": "1",
        "value": "选项一"
      },
      {
        "key": "2",
        "value": "选项二"
      }
    ]
  }
}

props 下 options 选项中还支持设置如下属性：

• disabled: true/false 当前选项时候禁用

下拉选择

选项类组件配置，可切换不同的选项

{
  "type": "select",
  "col": "",
  "label": "",
  "props": {
    "options": [
      {
        "key": "1",
        "value": "选项一"
      },
      {
        "key": "2",
        "value": "选项二"
      }
    ]
  }
}

props 中还支持设置如下属性：

参数	说明	类型	默认值
placeholder	占位提示	string	请选择
optionType	选项类型	static / api	static
options	选项数据	Array<{key: string, value: string}>	[]
api	选项数据接口获取地址，optionType 为 api 时有效	string
fieldNames	选项数据取值字段，optionType 为 api 时有效	{key: string, value: string}	{key: "key", value: "value"}
apiTrigger	选项数据接口调用时机，optionType 为 api 时有效	click 点击下拉框时 mounted 组件加载时	mounted

复选框

复选框组件，多项数据选择

{
  "type": "checkbox",
  "col": "",
  "label": "",
  "props": {}
}

props 支持设置如下属性：

• limit: number 最多选择几项

开关

开关组件，布尔值类型数据使用

{
  "type": "switch",
  "col": "",
  "label": "",
  "props": {}
}

props 支持设置如下属性：

• disabled: true/false 是否禁用
• onChange: 组件值变化时的操作

文本域

文本域组件，文本量较大时使用

{
  "type": "textarea",
  "col": "",
  "label": "",
  "props": {}
}

props 支持设置如下属性：

• placeholder: string 占位提示
• minRows: number 最小行数
• maxRows: number 最大行数

颜色选择器

颜色选择器组件，需要配置色值时使用

{
  "type": "color",
  "col": "",
  "label": "",
  "props": {}
}

图标选择器

图标选择器组件，需要配置图标时使用

{
  "type": "icon",
  "col": "",
  "label": "",
  "props": {}
}

带单位输入框

该组件的值为对象，包含值和单位，使用示例：宽，高等需要可以设置不同的单位

{
  "type": "unitInput",
  "col": "",
  "label": "",
  "props": {}
}

props 支持设置如下属性：

• units: string[]，单位选项数据，例如：["px", "%", "rem"]

高级类型

表格

用来配置复杂的对象数组数据

{
  "type": "table",
  "col": "",
  "label": "",
  "props": {
    "columns": [
      {
        "type": "intlInput",
        "col": "title",
        "label": "标题",
        "default": "",
        "props": {}
      },
      {
        "type": "input",
        "col": "name",
        "label": "数据字段",
        "default": "",
        "props": {}
      }
    ]
  }
}

props 支持设置如下属性：

参数	说明	类型	默认值
columns	表格子面板配置项	Array<组件基础配置项>	[]
tableColumns	表格展示列,每一项值为 columns 中配置项 col 字段名，不设置默认取 columns 中前两项展示	string[]	[]
options	选项配置，设置了选项则添加一项时为下拉选择	OptionItem[]	[]
maxSelectCol	用来判断新增数据是否唯一的字段名，设置了 options 后有效	string
disableEdit	禁用编辑	boolean	false
disableRemove	禁用删除	boolean	false
disableAppend	禁用添加	boolean	false
disableDrag	禁用拖拽	boolean	false
maxLength	最多可添加多少个选项，未填写不限制	number	-

Type

OptionItem

参数	说明	类型	默认值
key	选项 key 值	string
value	选项 value 值	string
maxSelect	设置最多选择几项，不设置则不限	number
default	新增一项时该项的默认数据	Record<string, any>

代码编辑器

代码编辑器组件，自定义某些数据时使用，例如：选项数据，渲染函数等

{
  "type": "code",
  "col": "",
  "label": "",
  "props": {}
}

props 支持设置如下属性：

• mode: javascript | css | html | less | json | java 代码类型，默认：json

富文本编辑器

需要配置富文本内容时使用

{
  "type": "richText",
  "col": "",
  "label": "",
  "props": {}
}

函数编辑器

回调函数配置，通常用于设置自定义组件内外交互的回调函数。

{
  "type": "function",
  "col": "",
  "label": "",
  "props": {}
}

props 支持设置如下属性：

• btnDisabled: true / false，是否禁用编辑按钮

固定类型

以下配置项为组件通用配置，直接根据需要复制使用，无需更改配置。

默认状态

组件默认状态配置，可控制组件显隐，进行变量绑定

{
  "type": "radio",
  "col": "status",
  "label": "默认状态",
  "bindParam": true,
  "props": {
    "options": [
      {
        "key": "default",
        "value": "默认"
      },
      {
        "key": "hide",
        "value": "隐藏"
      }
    ]
  }
}

自定义样式

可对组件内样式进行自定义配置，支持 less 写法

{
  "type": "style",
  "col": "baseStyle",
  "label": "自定义样式"
}

唯一标识

展示并复制组件的唯一标识 key，某些操作需要组件的 key 值，该组件方便 key 值的查找和复制

{
  "label": "唯一标识",
  "type": "uniqueId",
  "col": "uniqueKey"
}

循环

配置组件根据列表数据循环渲染

{
  "type": "loop"
}