@ttkj/avue-form-design

基于@ttkj/avue的表单设计器

1,978

Install
`npm install @ttkj/avue-form-design`
Latest Version:	1.8.14 (Sep 17, 2026)
Vue:	2
License:	MIT
Last Updated:	Sep 17, 2026
Links:	npm

Maintainer: osxcn

简介

基于@ttkj/avue的表单设计器

依赖

element-ui 2.15.2+

$ npm i element-ui

@ttkj/avue 2.10.23

$ npm i @ttkj/avue

或自行引入cdn

安装

组件

$ npm i @ttkj/avue-form-design
或
$ yarn add @ttkj/avue-form-design

使用

import AvueFormDesign from '@ttkj/avue-form-design'

Vue.use(AvueFormDesign)

<avue-form-design style="height: 86vh;"
                  :options="options"
                  storage
                  @submit="handleSubmit"></avue-form-design>

属性

参数	说明	类型	默认值
options	字段配置	Object/String	{ column: [] }
storage	开启本地存储功能，防止浏览器刷新丢失json	Boolean	false
asideLeftWidth	左工具栏宽度	String/Number	'270px'
asideRightWidth	右工具栏宽度	String/Number	'380px'
toolbar	顶部工具栏	Array	['avue-doc', 'import', 'generate', 'preview', 'clear']
undoRedo	是否开启撤销重做功能	Boolean	true
includeFields	左侧展示字段	Array	fieldsConfig.js中配置的字段
excludeFields	左侧禁用字段	Array	fieldsConfig.js中配置的字段
customFields	自定义组件	Array	使用方法见下文
customFieldsConfigs	自定义组件属性配置组件	Object	其中key为自定义组件的component，value为组件属性设计器名称
defaultValues	默认值配置	Object	-
fieldConfigs	用于表单设计器组件库属性的配置	Object	-
fieldEventConfig	通用的组件事件配置	Object	-
eventConfig	全局事件配置	Object	-
customTransformToAvueOptions	设计器配置项转avue配置项	(data, obj) => Promise`<object>`	第一个参数data为内置转化后的option，第二个obj为原始的设计器配置项，返回值是一个Promise，值为avue配置项
customTransAvueOptionsToFormDesigner	avue配置项转设计器配置项	(data, obj) => Promise`<object>`	第一个参数data为内置转化后的option，第二个obj为原始的avue配置项，返回值是一个Promise，值为设计器配置项

customFields使用方法

customFields可以直接是表单组件配置，也可以是一个分组

参数	说明	类型	默认值
title	分组名称	string	不填则为'自定义'
sort	分组排序	number	不填按顺序填充到内置组件分组后
list	组件列表	Array	表单组件配置列表

options字段配置

Avue文档

属性	说明	类型	可选值	默认值
column	Avue字段	Array	-	[]
labelPosition	字段位置	String	'left'/'center'/'right'	-
labelWidth	字段宽度	Number	-	-
gutter	字段间隔	Number	-	0
menuBtn	表单按钮	Boolean	true/false	true
submitBtn	显示提交按钮	Boolean	true/false	true
submitText	提交按钮文本	String	-	'提交'
emptyBtn	显示清空按钮	Boolean	true/false	true
emptyText	清空按钮文本	String	-	'清空'
detail	详情模式	Boolean	true/false	false
readonly	全局只读	Boolean	true/false	false
disabled	全局禁用	Boolean	true/false	false

defaultValues配置

defaultValues是一个数组。

属性	说明	类型	可选值	默认值
type	值的类型	String	String: '字符串', Number: '数值', Boolean: '布尔值',Array: '数组', Object: '对象', Date: '时间类'	-
label	显示名称	String	-	-
value	值/表达式	String	-	-

fieldConfigs说明

fieldConfigs对表单组件配置属性的配置。涵盖了内置组件和自定义组件。

key为组件类型，value为配置项。配置项如下：

属性	说明	类型	可选值	默认值
column	展示字段的覆盖配置	Object	-	-
config	设计器的配置	Object	-	-

config配置

{
  fieldConfigs: {
    type: {             // 组件type
      column: {},       // 组件column覆盖配置
      config: {         // 设计器配置
        icon: '',       // 左侧拖拽按钮图标
        tip: '',        // 左侧拖拽按钮提示
        label: '',      // 左侧拖拽按钮显示文字
        component: ''， // 配置组件Name
        params: {       // 基本属性配置
          param: {      // 某个属性的配置，如果为boolean，等同于对象下show状态
            show: true, // 是否显示配置, 不配置表示显示
            disabled: false,  // 显示情况下是否可编辑
            value: '',        // 配置项的默认值
            valueType: [],    // param为value时的配置，详见默认值配置
            ...         // 其他视属性本身而定
          }
        },
        validate: true,       // 是否显示校验栏
        dataSubmit: true,  // 是否显示数据提交栏
        events: {             // 事件配置。如果为boolean，等同于对象下show状态
          show: true,         // 是否显示事件配置, 不配置表示显示
          list: [],           // 可用的事件
          config: {           // 事件配置
            event: {          // 事件ID
              id: 'event',    // 事件ID
              name: '',       // 事件名称
              note: [         // 事件参数说明
                {
                  name: '',         // 参数key
                  type: '',         // 参数字段类型
                  description: ''   // 参数说明
                }
              ],
              template: ''      // 事件默认模板
            }
          }
        }
      }
    }
  }
}

事件

名称	说明	回调参数
submit	生成json回调	当前配置的json

方法

名称	说明	参数	返回
getData	获取当前编辑器的JSON	type: 'string'/'json'	Promise

插槽

名称	说明
toolbar	顶部工具栏右侧插槽
toolbar-left	顶部工具栏左侧插槽

Avue插件

富文本

import AvueUeditor from 'avue-plugin-ueditor'

Vue.use(AvueUeditor)

打包

组件

$ yarn lib

源码

$ yarn build