03.表单基础控件属性介绍
# 基础控件
# Lable标签
Lable标签设计界面展示效果:
Lable标签属性说明
属性字段 | 属性分类 | 属性说明 |
标题名称 | 基本设置 | 对Lable控件定义一个标题,标题为空时不显示。 |
绑定字段 | 基本设置 | 存入数据库的字段名称,也是表单变量的名称。 |
默认值 | 基本设置 | 设置默认显示的内容 |
是否隐藏 | 基本设置 | 控制控件是否隐藏和显示 |
显示标题 | 基本设置 | 控制控件的标题是否显示和隐藏 |
是否保存 | 基本设置 | 控制控件是否创建数据库字段,对其进行保存 |
数据长度 | 基本设置 | 控制控件创建数据库字段长度。 |
标题独行 | 基本设置 | 控制控件的标题是否独立一行显示。 |
对齐方式 | 布局设置 | 控制控件的文本对齐方式 |
栅格 | 布局设置 | 控制模块占整个屏幕的比例,不同设备设计模式下,对应栅格设置是不同的 |
标题宽度 | 布局设置 | 控制标题展示的宽度 |
自定义属性 | 其它 | 具体的请参考【1.1模块控件的自定义属性说明】 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
# 占位组件
占位组件设计界面展示效果:
占位组件属性说明
属性字段 | 属性分类 | 属性说明 |
是否隐藏 | 基本属性 | 控制是否显示或者隐藏 |
栅格 | 布局设置 | 控制模块占整个屏幕的比例,不同设备设计模式下,对应栅格设置是不同的 |
自定义属性 | 其它 | 具体的请参考【1.1模块控件的自定义属性说明】 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
# 超链接
超链接设计界面展示效果:
超链接属性说明
属性字段 | 属性分类 | 属性说明 |
标题名称 | 基本设置 | 对控件定义一个标题,标题为空时不显示。 |
绑定字段 | 基本设置 | 设置跳转的url地址 |
Target | 基本设置 | 设置跳转的模式 |
连接类型 | 基本设置 | 设置超链接的展示类型 |
是否只读 | 基本设置 | 控制控件是否可以编辑或者只读 |
是否下滑线 | 基本设置 | 超链接是否有下划线 |
显示标题 | 基本设置 | 控制控件的标题是否显示/隐藏 |
权限标识 | 基本设置 | 给控件设置一个权限标识,在菜单中添加改权限标识,就可以根据角色授权,控制控件是否显示了。 |
是否隐藏 | 基本设置 | 控制控件的显示或者隐藏 |
对齐方式 | 布局设置 | 针对控件的标题设置对齐方式。 |
栅格 | 布局设置 | 控制模块占整个屏幕的比例,不同设备设计模式下,对应栅格设置是不同的 |
自定义属性 | 其它 | 具体的请参考【1.1模块控件的自定义属性说明】 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
# 文字描述
文字描述设计界面展示效果:
文字描述属性说明
属性字段 | 属性分类 | 属性说明 |
默认值 | 基本设置 | 点击编辑弹出富文本,对其默认值设置。 |
标题名称 | 基本设置 | 设置控件的标题名称,标题的名称为空不显示标题 |
是否隐藏 | 基本设置 | 设置控件隐藏或者显示 |
显示标题 | 基本设置 | 设置标题是否显示或隐藏 |
对齐方式 | 基本设置 | 设置标题的对齐方式 |
栅格 | 基本设置 | 控制模块占整个屏幕的比例,不同设备设计模式下,对应栅格设置是不同的 |
标题宽度 | 基本设置 | 设置标题所占的宽度 |
自定义属性 | 其它 | 具体的请参考【1.1模块控件的自定义属性说明】 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
# 图标选择
图标选择组件设计界面展示效果:
图标选择属性说明
属性字段 | 属性分类 | 属性说明 |
默认值 | 基本设置 | 点击弹出图标选择页面,选择一个图标做为默认值 |
标题名称 | 基本设置 | 设置控件的标题名称,标题的名称为空不显示标题 |
绑定字段 | 基本设置 | 设置控件的绑定字段名称和vue代码中字段变量名称 |
是否隐藏 | 基本设置 | 设置控件隐藏或者显示 |
显示标题 | 基本设置 | 设置标题是否显示或隐藏 |
权限标识 | 基本设置 | 给控件设置一个权限标识,在菜单中添加改权限标识,就可以根据角色授权,控制控件是否显示了。 |
对齐方式 | 基本设置 | 设置标题的对齐方式 |
栅格 | 基本设置 | 控制模块占整个屏幕的比例,不同设备设计模式下,对应栅格设置是不同的 |
标题宽度 | 基本设置 | 设置标题所占的宽度 |
自定义属性 | 其它 | 具体的请参考【1.1模块控件的自定义属性说明】 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
# 条形码
条形码组件设计界面展示效果:
条形码组件属性说明
属性字段 | 属性分类 | 属性说明 |
默认值 | 基本设置 | 设置条形码的默认值,扫码后的值 |
标题名称 | 基本设置 | 设置控件的标题名称,标题的名称为空不显示标题 |
绑定字段 | 基本设置 | 设置控件的绑定字段名称和vue代码中字段变量名称 |
是否隐藏 | 基本设置 | 设置控件隐藏或者显示 |
显示标题 | 基本设置 | 设置标题是否显示或隐藏 |
对齐方式 | 基本设置 | 设置标题的对齐方式 |
栅格 | 基本设置 | 控制模块占整个屏幕的比例,不同设备设计模式下,对应栅格设置是不同的 |
高度 | 基本设置 | 设置条形码的高度 |
自定义属性 | 其它 | 具体的请参考【1.1模块控件的自定义属性说明】 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
# 二维码
二维码组件设计界面展示效果:
二维码组件属性说明
属性字段 | 属性分类 | 属性说明 |
默认值 | 基本设置 | 设置二维码的默认值,扫码后的值 |
标题名称 | 基本设置 | 设置控件的标题名称,标题的名称为空不显示标题 |
绑定字段 | 基本设置 | 设置控件的绑定字段名称和vue代码中字段变量名称 |
是否隐藏 | 基本设置 | 设置控件隐藏或者显示 |
显示标题 | 基本设置 | 设置标题是否显示或隐藏 |
二维码颜色 | 基本设置 | 设置二维码的颜色 |
二维码背景颜色 | 基本设置 | 设置二维码的背景颜色 |
对齐方式 | 基本设置 | 设置标题的对齐方式 |
栅格 | 基本设置 | 控制模块占整个屏幕的比例,不同设备设计模式下,对应栅格设置是不同的 |
高度 | 基本设置 | 设置二维码的高度 |
宽度 | 基本设置 | 设置二维码的宽度 |
自定义属性 | 其它 | 具体的请参考【1.1模块控件的自定义属性说明】 |
# 分割线
分割线组件设计界面展示效果:
分割线属性说明
属性字段 | 属性分类 | 属性说明 |
默认值 | 基本设置 | 设置分割线的标题名称 |
是否隐藏 | 基本设置 | 设置控件隐藏或者显示 |
Target | 基本设置 | 设置标题的位置 |
栅格 | 基本设置 | 控制模块占整个屏幕的比例,不同设备设计模式下,对应栅格设置是不同的 |
高度 | 基本设置 | 设置二维码的高度 |
宽度 | 基本设置 | 设置二维码的宽度 |
自定义属性 | 其它 | 具体的请参考【1.1模块控件的自定义属性说明】 |
# 隐藏文本
隐藏文本组件设计界面展示效果:
隐藏文本属性说明
属性字段 | 属性分类 | 属性说明 |
默认值 | 基本设置 | 设置二维码的默认值,扫码后的值 |
标题名称 | 基本设置 | 设置控件的标题名称,标题的名称为空不显示标题 |
数据长度 | 基本设置 | 设置数据库字段的长度 |
绑定字段 | 基本设置 | 设置vue代码变量名称和数据库字段名称 |
栅格 | 基本设置 | 控制模块占整个屏幕的比例,不同设备设计模式下,对应栅格设置是不同的 |
自定义属性 | 其它 | 具体的请参考【1.1模块控件的自定义属性说明】 |
# 自定义组件
自定义组件设计界面展示效果:
自定义组件属性说明
属性字段 | 属性分类 | 属性说明 |
标题名称 | 基本设置 | 设置控件的标题名称,标题的名称为空不显示标题 |
默认值 | 基本设置 | 设置字段的默认值 |
数据长度 | 基本设置 | 设置数据库字段的长度 |
绑定字段 | 基本设置 | 设置vue代码变量名称和数据库字段名称 |
自定义代码 | 基本设置 | 设置自定义vue代码。 |
是否隐藏 | 基本设置 | 设置控件是否隐藏 |
显示标题 | 基本设置 | 设置控件的标题是否显示 |
标题独行 | 基本设置 | 设置控件的标题是否独行 |
栅格 | 布局设置 | 控制模块占整个屏幕的比例,不同设备设计模式下,对应栅格设置是不同的 |
对齐方式 | 布局设置 | 设置控件的标题对齐方式 |
标题宽度 | 布局设置 | 设置标题的宽度 |
自定义属性 | 其它 | 具体的请参考【1.1模块控件的自定义属性说明】 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
# 单行文本
单行文本:单行文本框显示界面效果如下:
属性说明:属性参考资料https://element.eleme.cn/#/zh-CN/component/input (opens new window)
属性字段 | 属性分类 | 属性说明 |
控件标题 | 基本设置 | 控件的标题,当标题为空不显示标题栏 |
绑定字段 | 基本设置 | 设置vue代码变量名称和数据库字段名称 |
默认值 | 基本设置 | 控件初始化默认值 |
提示词 | 基本设置 | 当控件内容为空时显示文字 |
数据长度 | 基本设置 | 控制文本输入字符的长度 |
正则验证 | 基本设置 | 【添加表达式】可添加常用正则表达式,也可以添加自定义正则表达式。添加了正则表达式的,提交时就会验证对应正则表达式。具体操作请参考【2.11单行文本的正则验证】 |
是否必填 | 基本设置 | 提交数据时必填验证 |
是否只读 | 基本设置 | 控制控件为只读 |
是否密码 | 基本设置 | 是否显示密码控件 |
一键清空 | 基本设置 | 是否显示清空按钮 |
显示字数 | 基本设置 | 控制文本框是否显示输入的字数 |
是否隐藏 | 基本设置 | 设置控件是否隐藏 |
显示标题 | 基本设置 | 控制控件的标题是否显示 |
标题独行 | 基本设置 | 控制控件的标题是否独立行展示 |
尾部图标 | 布局设置 | 设置文本框尾部图标的显示 |
头部图标 | 布局设置 | 设置文本框头部显示的图标。 |
栅格 | 布局设置 | 设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。 |
标题宽度 | 布局设置 | 控制标题占用宽度 |
对齐方式 | 布局设置 | 对控件标题设置对齐方式 |
控件尺寸 | 布局设置 | 控制文本框显示的尺寸大小 |
自定义属性 | 其它 | 可以自定义给template中的标签添加自定义属性内容 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
常用事件:
事件名称 | 说明 |
Change | 文本框内容变化时触发事件 |
Blur | 在 Input 失去焦点时触发 |
Focus | 在 Input 获得焦点时触发 |
Input | 在 Input 失去焦点时触发 |
Clear | 在点击由 clearable 属性生成的清空按钮时触发 |
点击【添加事件】弹出添加额外的事件 具体拥有那些事件请参考具体事件请参考
https://element.eleme.cn/#/zh-CN/component/input (opens new window)
# 多行文本
多行文本框:拖拽设计区域显示效果,如下。
多行文本框属性如下:
属性名称 | 属性分类 | 属性说明 |
标题名称 | 基本设置 | 控件的标题,当标题为空不显示标题栏 |
默认值 | 基本设置 | 界面初始化值 |
提示词 | 基本设置 | 当控件内容为空时显示文字 |
绑定字段 | 基本设置 | 设置vue代码变量名称和数据库字段名称 |
数据长度 | 基本设置 | 控制文本输入字符的长度和数据库字段长度 |
最小行数 | 基本设置 | 3 默认展示显示多少行的高度 |
最大行数 | 基本设置 | 1000展示1000行的高度 |
是否必填 | 基本设置 | 控制控件是否必填 |
显示字数 | 基本设置 | 控制控件是否显示字数 |
是否只读 | 基本设置 | 控制控件是否只读 |
是否隐藏 | 基本设置 | 控制控件是否隐藏/显示 |
显示标题 | 基本设置 | 控制是否显示标题 |
标题独行 | 基本设置 | 控制控件的标题是否独行展示 |
栅格 | 布局设置 | 设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。 |
对齐方式 | 布局设置 | 控制标题的对齐方式 |
标题宽度 | 布局设置 | 控制标题的显示宽度 |
自定义属性 | 其它 | 可以自定义给template中的标签添加自定义属性内容,具体其它属性请参考 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
多文本框事件说明:
事件名称 | 说明 |
Change | 文本框内容变化时触发事件 |
Blur | 在 Input 失去焦点时触发 |
Focus | 在 Input 获得焦点时触发 |
Input | 在 Input 失去焦点时触发 |
Clear | 在点击由 clearable 属性生成的清空按钮时触发 |
点击【添加事件】弹出添加额外的事件 具体拥有那些事件请参考具体事件请参考
https://element.eleme.cn/#/zh-CN/component/input (opens new window)
# 下拉列表
下拉列表:设计区域展示效果,如图:
属性说明:
属性名称 | 属性类型 | 属性说明 |
标题名称 | 基本设置 | 控件的标题,当标题为空不显示标题栏 |
提示词 | 基本设置 | 设置控件的提示词,没有设置值时显示 |
绑定字段 | 基本设置 | 设置vue代码变量名称和数据库字段名称 |
数据长度 | 基本设置 | 设置下拉列表数据库字段长度 |
是否初始化加载 | 基本设置 | 如果配置数据源绑定数据,设置是否初始化从数据源中加载数据 |
是否可多选 | 基本设置 | 控制下拉列表是否支持多选 |
是否可搜索 | 基本设置 | 控制下拉列表是否显示搜索功能 |
是否必填 | 基本设置 | 控制表单验证是否必填 |
是否只读 | 基本设置 | 控制控件是否只读 |
collapse-tags | 基本设置 | 多选时是否将选中值按文字的形式展示 |
一键清空 | 基本设置 | 是否显示清空按钮 |
是否隐藏 | 基本设置 | 控制控件是否隐藏 |
显示标题 | 基本设置 | 控制标题是否显示 |
标题独行 | 基本设置 | 控制标题是否独行展示 |
控件尺寸 | 布局设置 | 显示控件显示的尺寸 |
对齐方式 | 布局设置 | 控制标题的对齐方式 |
栅格 | 布局设置 | 设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。 |
标题宽度 | 布局设置 | 控制标题占用宽度 |
自定义属性 | 其它 | 可以自定义给template中的标签添加自定义属性内容 |
数据类型 | 基本设置 | 数据类型分为动态数据和静态数据, 动态数据:是从Api接口获取数据 静态数据:在线编写的下来选项。 字典数据:控制控件从数据字典中加载绑定 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
数据类型:动态数据绑定如下图:
请求地址:点击弹出选择调用后端的Api接口。点击弹出如下图:
点击选择,选择请求后端接口的地址
过滤条件配置:
条件字段是Api请求的参数字段,条件值可以是url参数,表单中的变量,自定义变量,环境变量。
参数为表单中的变量时,当对应表单变量发送变化,就会触发接口该接口的请求,从而达到各种联动效果,级联效果。
显示字段:是为了选择数据时显示的那个字段。
赋值规则设置:当下拉列表选择值后,将选择对应行数据进行赋值到其它控件中。
事件说明:
字段名称 | 字段说明 |
Change | 选择不同值时触发(双击控件也可以创建事件) |
Blur | 失去焦点时触发 |
Focus | 得到焦点时触发 |
点击【添加事件】弹出添加额外的事件 具体拥有那些事件请参考具体事件请参考
https://element.eleme.cn (opens new window)
# 日期控件
日期控件:设计区域展示效果,如图:
属性说明
属性字段 | 属性分类 | 属性字段说明 |
标题名称 | 基本设置 | 控件的标题,当标题为空不显示标题栏 |
提示词 | 基本设置 | 控件未选择日期前,初始化提示词 |
格式化串 | 基本设置 | 设置显示日期的格式 |
控件类型 | 基本设置 | 分为选日期,选年,选月份、选星期、日期范围,点击弹出选择不同日期格式。 |
绑定字段 | 基本设置 | 设置vue代码变量名称和数据库字段名称 |
数据长度 | 基本设置 | 设置数据库字段长度 |
是否必填 | 基本设置 | 设置提交时验证必填 |
是否只读 | 基本设置 | 设置控件是否只读 |
是否隐藏 | 基本设置 | 设置控件是否隐藏 |
显示标题 | 基本设置 | 设置控件标题是否显示 |
标题是否独行 | 基本设置 | 设置标题是否独行展示 |
对齐方式 | 布局设置 | 控制标题的对齐方式 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
自定义属性 | 其它 | 可以自定义给template中的标签添加自定义属性内容 |
栅格 | 布局设置 | 设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。 |
标签宽度 | 布局设置 | 设置标题的宽度 |
事件说明
字段名称 | 字段说明 |
Change | 选择不同值时触发(双击控件也可以创建事件) |
Blur | 失去焦点时触发 |
Focus | 得到焦点时触发 |
点击【添加事件】弹出添加额外的事件 具体拥有那些事件请参考具体事件请参考
https://element.eleme.cn (opens new window)
# 单选控件
单选控件:设计区域展示效果,如图:
属性说明
属性字段 | 属性类型 | 属性字段说明 |
标题名称 | 基本设置 | 控件的标题,当标题为空不显示标题栏 |
绑定字段 | 基本设置 | 设置vue代码变量名称和数据库字段名称 |
数据长度 | 基本设置 | 设置数据库字段长度 |
数据类型 | 基本设置 | 数据类型分为动态数据和静态数据, 动态数据:是从Api接口获取数据 静态数据:在线编写的下来选项 字典数据:是从数据字典中读取数据 |
初始加载 | 基本设置 | 如果数据类型是Api数据,设置页面加载时是否加载Api中的数据进行绑定。 |
是否只读 | 基本设置 | 设置控件是否只读 |
是否必填 | 基本设置 | 设置提交时验证必填 |
IsButton | 基本设置 | 是否以按钮模式显示。 |
是否隐藏 | 基本设置 | 设置控件是否隐藏 |
显示标题 | 基本设置 | 设置标题是否显示 |
标题独行 | 基本设置 | 设置标题是否独行展示 |
标题宽度 | 布局设置 | 可以自定义给template中的标签添加自定义属性内容 |
对齐方式 | 布局设置 | 设置控件标题对齐方式 |
选项行展示 | 布局设置 | 设置控件选项是否独立一行展示 |
栅格 | 布局设置 | 设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
自定义属性 | 其它 | 可以自定义给template中的标签添加自定义属性内容 |
数据类型:动态数据绑定如下图:
请求地址:点击弹出选择调用后端的Api接口。点击弹出如下图:
点击选择,选择请求后端接口的地址
过滤条件配置:
条件字段是Api请求的参数字段,条件值可以是url参数,表单中的变量,自定义变量,环境变量。
参数为表单中的变量时,当对应表单变量发送变化,就会触发接口该接口的请求,从而达到各种联动效果,级联效果。
显示字段:是为了选择数据时显示的那个字段。
赋值规则设置:当下拉列表选择值后,将选择对应行数据进行赋值到其它控件中。
事件说明:
事件名称 | 说明 |
Change | 选择的事件 |
点击【添加事件】弹出添加额外的事件 具体拥有那些事件请参考具体事件请参考
https://element.eleme.cn (opens new window)
# 多选控件
多选控件:设计区域展示效果,如下图
属性 | 属性类型 | 说明 |
标题名称 | 基本设置 | 控件的标题,当标题为空不显示标题栏 |
绑定字段 | 基本设置 | 设置vue代码变量名称和数据库字段名称 |
数据类型 | 基本设置 | 数据类型分为动态数据和静态数据, 动态数据:是从Api接口获取数据 静态数据:在线编写的下来选项 字典数据:是从数据字典中读取数据 |
初始加载 | 基本设置 | 如果数据类型是Api数据,设置页面加载时是否加载Api中的数据进行绑定。 |
是否只读 | 基本设置 | 设置控件是否只读 |
是否必填 | 基本设置 | 设置提交时验证必填 |
IsButton | 基本设置 | 是否以按钮模式显示。 |
是否隐藏 | 基本设置 | 设置控件是否隐藏 |
显示标题 | 基本设置 | 设置标题是否显示 |
标题独行 | 基本设置 | 设置标题是否独行展示 |
标题宽度 | 布局设置 | 可以自定义给template中的标签添加自定义属性内容 |
对齐方式 | 布局设置 | 设置控件标题对齐方式 |
选项行展示 | 布局设置 | 设置控件选项是否独立一行展示 |
栅格 | 布局设置 | 设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
自定义属性 | 其它 | 可以自定义给template中的标签添加自定义属性内容 |
数据类型:动态数据绑定如下图:
请求地址:点击弹出选择调用后端的Api接口。点击弹出如下图:
点击选择,选择请求后端接口的地址
过滤条件配置:
条件字段是Api请求的参数字段,条件值可以是url参数,表单中的变量,自定义变量,环境变量。
参数为表单中的变量时,当对应表单变量发送变化,就会触发接口该接口的请求,从而达到各种联动效果,级联效果。
显示字段:是为了选择数据时显示的那个字段。
赋值规则设置:当下拉列表选择值后,将选择对应行数据进行赋值到其它控件中。
事件说明:
事件名称 | 说明 |
Change | 选择的事件 |
点击【添加事件】弹出添加额外的事件 具体拥有那些事件请参考具体事件请参考
https://element.eleme.cn (opens new window)
# 按钮控件
按钮控件实际为按钮组控件,拖拽到设计器展示效果:
属性名称 | 属性分类 | 说明 |
按钮项 | 基本设置 | 对按钮组件进行维护,新增,删除,修改。 |
是否隐藏 | 基本设置 | 控制隐藏或显示 |
栅格 | 布局设置 | 设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。 |
按钮项编辑如下:
【添加按钮】:点击新增一个按钮
图标:点击可弹出图标选择。
文本框:可修改按钮的名称
修改:点击切换到具体按钮的操作
删除:删除该按钮。
拖拽:拖拽设置按钮的显示顺序
点击【修改】会切换到具体选中按钮,显示按钮的属性,按钮属性截图如下:
属性说明:
属性字段 | 属性类型 | 说明 |
标题名称 | 基本设置 | 按钮显示名称 |
图标选择 | 布局设置 | 按钮显示图标 |
按钮类型 | 基本设置 | 按钮显示类型text,primary,success、info、 Warning、danger |
权限标识 | 基本设置 | 给控件设置一个权限标识,在菜单中添加改权限标识,就可以根据角色授权,控制控件是否显示了。 |
自定义属性 | 其它 | 可以自定义给template中的标签添加自定义属性内容 |
Pian | 布局设置 | 是否朴素按钮 |
round | 布局设置 | 是否圆角按钮 |
circle | 布局设置 | 是否圆形按钮 |
控件尺寸 | 布局设置 | 按钮显示大小,分为:中等,小型,超小 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
按钮事件说明
事件名称 | 事件说明 |
Click | 单机事件 |
Dbclick | 双击事件 |
Blur | 失去焦点 |
Focus | 得到焦点事件 |
点击【添加事件】弹出添加额外的事件 具体拥有那些事件请参考具体事件请参考
https://element.eleme.cn (opens new window)
# 开关控件
开关控件:拖拽到设计界面效果如下
开关属性说明
属性名称 | 属性类型 | 属性说明 |
标题名称 | 基本设置 | 控件的标题,当标题为空不显示标题栏 |
标签宽度 | 布局设置 | 标题占的宽度 |
栅格 | 布局设置 | 设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。 |
对齐方式 | 布局设置 | 设置控件标题的对齐方式 |
是否只读 | 基本设置 | 设置控件是否只读 |
默认值 | 基本设置 | 开关的默认值 |
开启颜色 | 基本设置 | 设置开启的颜色 |
关闭颜色 | 基本设置 | 设置关闭的颜色 |
绑定字段 | 基本设置 | 设置vue代码变量名称和数据库字段名称 |
是否隐藏 | 基本设置 | 设置控件是否隐藏 |
显示标题 | 基本设置 | 设置控件是否显示标题 |
标题独行 | 基本设置 | 设置标题是否独立一行展示 |
自定义属性 | 其它 | 可以自定义给template中的标签添加自定义属性内容 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
事件说明
事件名称 | 事件说明 |
Change | 当开关值改变的事件 |
点击【添加事件】弹出添加额外的事件 具体拥有那些事件请参考具体事件请参考
https://element.eleme.cn (opens new window)
# 滑块控件
滑块控件:拖拽到设计界面效果如下
滑块属性说明:
属性名称 | 属性类型 | 属性说明 |
控件标题 | 基本设置 | 控件的标题,当标题为空不显示标题栏 |
是否只读 | 基本设置 | 控制控件是否只读 |
默认值 | 基本设置 | 设置页面初始化的后的值 |
绑定字段 | 基本设置 | 设置vue代码变量名称和数据库字段名称 |
是否隐藏 | 基本设置 | 设置控件隐藏 |
显示标题 | 基本设置 | 设置控件标题是否显示 |
标题独行 | 基本设置 | 设置控件标题是否独行展示 |
标签宽度 | 布局设置 | 标题占的宽度 |
栅格 | 布局设置 | 设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。 |
自定义属性 | 其它 | 可以自定义给template中的标签添加自定义属性内容 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
Min | 基本设置 | 滑块最小值 |
Max | 基本设置 | 滑块最大值 |
Step | 基本设置 | 每次增加值 |
Range | 基本设置 | 是否范围滑块 |
showstops | 基本设置 | 是否显示间断点 |
# 颜色选择控件
颜色选择控件,拖拽到可视化表单界面效果如下:
颜色选择属性说明
属性名称 | 属性类型 | 属性说明 |
标题名称 | 基本设置 | 控件的标题,当标题为空不显示标题栏 |
是否只读 | 基本设置 | 控制控件是否只读 |
默认值 | 基本设置 | 设置控件的默认值 |
是否隐藏 | 基本设置 | 设置控件是否隐藏 |
显示标题 | 基本设置 | 设置控件的标题是否显示 |
绑定字段 | 基本设置 | 设置vue代码变量名称和数据库字段名称 |
数据长度 | 基本设置 | 设置控件的数据长度 |
标题独行 | 基本设置 | 设置控件的标题是否独行展示。 |
标签宽度 | 布局设置 | 标题占的宽度 |
栅格 | 布局设置 | 设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。 |
对齐方式 | 布局设置 | 控制控件是否只读 |
控件尺寸 | 布局设置 | 按钮显示大小,分为:中等,小型,超小 |
自定义属性 | 其它 | 可以自定义给template中的标签添加自定义属性内容 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
# 富文本控件
富文本控件拖拽到可视化表单界面效果如下:
选中富文本框属性如下
属性名称 | 属性分类 | 属性说明 |
标题名称 | 基本设置 | 控件的标题,当标题为空不显示标题栏 |
提示词 | 基本设置 | 控件值为空时提示内容 |
是否必填 | 基本设置 | 设置控件是否必填 |
是否只读 | 基本设置 | 控制控件是否只读 |
绑定字段 | 基本设置 | 设置vue代码变量名称和数据库字段名称 |
是否隐藏 | 基本设置 | 设置控件是否隐藏或显示 |
显示标题 | 基本设置 | 设置控件的标题是否隐藏或显示 |
标题独行 | 基本设置 | 设置控件的标题是否独行展示 |
栅格 | 布局设置 | 设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。 |
标签宽度 | 布局设置 | 标题占的宽度 |
对齐方式 | 布局设置 | 控制标题的对齐方式 |
控件尺寸 | 布局设置 | 控制控件显示的大小 |
自定义属性 | 其它 | 可以自定义给template中的标签添加自定义属性内容 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
# 级联组件
级联组件拖拽到可视化表单界面效果如下:
选中属性如下:
属性名称 | 属性分类 | 属性说明 |
标题名称 | 基本设置 | 控件的标题,当标题为空不显示标题栏 |
提示词 | 基本设置 | 控件值为空时提示内容 |
数据类型 | 基本设置 | Api数据/静态数据 |
是否必填 | 基本设置 | 设置控件是否必填 |
是否只读 | 基本设置 | 控制控件是否只读 |
绑定字段 | 基本设置 | 设置vue代码变量名称和数据库字段名称 |
数据长度 | 基本设置 | 设置数据库字段的长度 |
是否隐藏 | 基本设置 | 设置控件是否隐藏或显示 |
显示标题 | 基本设置 | 设置控件的标题是否隐藏或显示 |
标题独行 | 基本设置 | 设置控件的标题是否独行展示 |
栅格 | 布局设置 | 设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。 |
标签宽度 | 布局设置 | 标题占的宽度 |
对齐方式 | 布局设置 | 控制标题的对齐方式 |
自定义属性 | 其它 | 可以自定义给template中的标签添加自定义属性内容 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
# 签名控件
签名控件拖拽到设计区域展示效果如下:
属性说明:
属性名称 | 属性类型 | 属性说明 |
标题名称 | 基本设置 | 控件的标题,当标题为空不显示标题栏 |
是否必填 | 基本设置 | 提前前验证值是否必填 |
是否只读 | 基本设置 | 控制控件是否只读 |
绑定字段 | 基本设置 | 设置vue代码变量名称和数据库字段名称 |
是否隐藏 | 基本设置 | 控制控件是否隐藏 |
显示标题 | 基本设置 | 设置标题是否显示 |
标题独行 | 基本设置 | 设置标题是否独行展示 |
栅格 | 布局设置 | 设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。 |
对齐方式 | 布局设置 | 设置标题的对齐方式 |
高度 | 布局设置 | 设置数组签名组件的高度 |
标签宽度 | 布局设置 | 标题占的宽度 |
自定义属性 | 其它 | 可以自定义给template中的标签添加自定义属性内容 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
# 定位控件
定位控件拖拽到设计区域展示效果如下:
属性说明:
属性名 | 属性类型 | 属性说明 |
标题名称 | 基本设置 | 控件的标题,当标题为空不显示标题栏 |
是否必填 | 基本设置 | 提前前验证值是否必填 |
是否只读 | 基本设置 | 控制控件是否只读 |
绑定字段 | 基本设置 | 设置vue代码变量名称和数据库字段名称 |
数据长度 | 基本设置 | 设置数据库字段的长度 |
是否隐藏 | 基本设置 | 设置控件是否隐藏 |
显示标题 | 基本设置 | 设置控件标题是否显示 |
标题独行 | 基本设置 | 设置控件标题是否独行展示 |
默认值 | 基本设置 | 设置控件初始化的值 |
标签宽度 | 布局设置 | 标题占的宽度 |
栅格 | 布局设置 | 设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。 |
对齐方式 | 布局设置 | 设置控件标题的对齐方式 |
自定义属性 | 其它 | 可以自定义给template中的标签添加自定义属性内容 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
# 评分控件
评分控件拖拽到设计界面效果如下:
评分控件属性说明:
属性名称 | 属性分类 | 属性说明 |
标题名称 | 基本设置 | 控件的标题,当标题为空不显示标题栏 |
默认值 | 基本设置 | 设置控件的默认值 |
Max | 基本设置 | 设置评分多少个星星 |
绑定字段 | 基本设置 | 设置vue代码变量名称和数据库字段名称 |
数据长度 | 基本设置 | 设置数据库字段的长度 |
是否只读 | 基本设置 | 控制控件是否只读 |
是否必填 | 基本设置 | 控制控件是否必填 |
是否隐藏 | 基本设置 | 控制控件是否隐藏 |
显示标题 | 基本设置 | 设置控件的标题是否显示 |
标题独行 | 基本设置 | 设置控件的标题是否独行展示 |
栅格 | 布局设置 | 设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。 |
对齐方式 | 布局设置 | 设置控件的标题对齐方式 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
标签宽度 | 布局设置 | 标题占的宽度 |
自定义属性 | 其它 | 可以自定义给template中的标签添加自定义属性内容 |
# 经纬度组件
经纬度控件:通过高德地图组件选择位置,返回经纬度。如下图:
经纬度控件属性说明:
属性名称 | 属性分类 | 属性说明 |
标题名称 | 基本设置 | 控件的标题,当标题为空不显示标题栏 |
默认值 | 基本设置 | 设置控件的默认值 |
绑定字段 | 基本设置 | 设置vue代码变量名称和数据库字段名称 |
数据长度 | 基本设置 | 设置数据库字段的长度 |
是否只读 | 基本设置 | 控制控件是否只读 |
是否必填 | 基本设置 | 控制控件是否必填 |
是否隐藏 | 基本设置 | 控制控件是否隐藏 |
显示标题 | 基本设置 | 设置控件的标题是否显示 |
标题独行 | 基本设置 | 设置控件的标题是否独行展示 |
栅格 | 布局设置 | 设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。 |
对齐方式 | 布局设置 | 设置控件的标题对齐方式 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
标签宽度 | 布局设置 | 标题占的宽度 |
自定义属性 | 其它 | 可以自定义给template中的标签添加自定义属性内容 |
# 数字控件
数字控件:即是数字输入控件,该控件只能输入数字。拖拽到设计界面效果如下:
数字控件属性如下:
属性名称 | 属性分类 | 属性说明 |
标题名称 | 基本设置 | 控件的标题,当标题为空不显示标题栏 |
栅格 | 布局设置 | 设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。 |
默认值 | 基本设置 | 默认初始化值 |
绑定字段 | 基本设置 | 设置vue代码变量名称和数据库字段名称 |
数据长度 | 基本设置 | 设置数据库字段的长度 |
Min | 基本设置 | 输入最小值 |
Max | 基本设置 | 输入最大值 |
保留几位小数 | 基本设置 | 设置数字控件保留几位小数 |
Step | 基本设置 | 递增数值 |
是否必填 | 基本设置 | 提前前验证值是否必填 |
是否只读 | 基本设置 | 控制控件是否只读 |
是否隐藏 | 基本设置 | 设置控件是否隐藏 |
显示标题 | 基本设置 | 设置控件标题是否显示 |
标题独行 | 基本设置 | 设置标题是否独行展示 |
标签宽度 | 布局设置 | 标题占的宽度 |
对齐方式 | 布局设置 | 设置控件的标题对齐方式 |
控件尺寸 | 布局设置 | 设置控件显示尺寸 |
自定义属性 | 其它 | 可以自定义给template中的标签添加自定义属性内容 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
# 图片展示
图片展示控件:拖拽到设计区域如下
图片属性说明
属性名称 | 属性类型 | 属性说明 |
标题名称 | 基本设置 | 控件的标题,当标题为空不显示标题栏 |
绑定字段 | 基本设置 | 设置vue代码变量名称和数据库字段名称 |
默认值 | 基本设置 | 设置加载的图片,也可以上传一张图片 |
是否隐藏 | 基本设置 | 设置控件是否隐藏显示 |
显示标题 | 基本设置 | 设置把标题是否显示 |
标题独行 | 基本设置 | 设置标题是否独行展示 |
宽度 | 布局设置 | 设置图片展示的宽度 |
高度 | 布局设置 | 设置图片展示的高度 |
对齐方式 | 布局设置 | 设置控件主题的对齐方式 |
自定义属性 | 可以自定义给template中的标签添加自定义属性内容 | |
栅格 | 布局设置 | 设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
# 时间选择控件
时间选择控件:拖拽到界面效果如下
属性说明:
属性名称 | 属性类型 | 属性说明 |
标题名称 | 基本设置 | 控件的标题,当标题为空不显示标题栏 |
是否必填 | 基本设置 | 设置控件必填,提交时会验证数据必填。 |
是否只读 | 基本设置 | 设置控件只读,不可选择 |
绑定字段 | 基本设置 | 设置vue代码变量名称和数据库字段名称 |
是否隐藏 | 基本设置 | 设置控件是否隐藏 |
显示标题 | 基本设置 | 设置控件的标题是否显示 |
是否独行 | 基本设置 | 设置控件的标题是否可独行展示 |
栅格 | 布局设置 | 设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。 |
对齐方式 | 布局设置 | 控制控件标题的对齐方式 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
标签宽度 | 布局设置 | 标题占的宽度 |
自定义属性 | 其它 | 可以自定义给template中的标签添加自定义属性内容 |
# 图片控件
上传控件:拖拽到可视化界面图如下
属性说明:
属性名称 | 属性类型 | 属性说明 |
标题名称 | 基本设置 | 控件的标题,当标题为空不显示标题栏 |
是否必填 | 基本设置 | 设置控件必填,提交时会验证数据必填。 |
是否只读 | 基本设置 | 设置控件只读,不可选择 |
绑定字段 | 基本设置 | 设置vue代码变量名称和数据库字段名称 |
最多上传文件数 | 基本设置 | 设置图片上传最多数量设置 |
文件大小 | 基本设置 | 设置文件上传大小,单位为MB |
是否隐藏 | 基本设置 | 设置控件是否隐藏 |
显示标题 | 基本设置 | 设置控件的标题是否显示 |
是否独行 | 基本设置 | 设置控件的标题是否可独行展示 |
栅格 | 布局设置 | 设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。 |
对齐方式 | 布局设置 | 控制控件标题的对齐方式 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
标签宽度 | 布局设置 | 标题占的宽度 |
自定义属性 | 其它 | 可以自定义给template中的标签添加自定义属性内容 |
# 上传控件
上传控件:拖拽到可视化界面图如下
控件属性如下
属性名称 | 属性类型 | 属性说明 |
标题名称 | 基本设置 | 控件的标题,当标题为空不显示标题栏 |
是否必填 | 基本设置 | 设置控件必填,提交时会验证数据必填。 |
是否只读 | 基本设置 | 设置控件只读,不可选择 |
绑定字段 | 基本设置 | 设置vue代码变量名称和数据库字段名称 |
最多上传文件数 | 基本设置 | 设置图片上传最多数量设置 |
文件大小 | 基本设置 | 设置文件上传大小,单位为MB |
上传文件格式 | 基本设置 | 配置可上传的文件格式 |
是否隐藏 | 基本设置 | 设置控件是否隐藏 |
显示标题 | 基本设置 | 设置控件的标题是否显示 |
是否独行 | 基本设置 | 设置控件的标题是否可独行展示 |
栅格 | 布局设置 | 设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。 |
对齐方式 | 布局设置 | 控制控件标题的对齐方式 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
标签宽度 | 布局设置 | 标题占的宽度 |
自定义属性 | 其它 | 可以自定义给template中的标签添加自定义属性内容 |
# 轮播图
轮播图:拖拽到可视化界面图如下
控件属性如下
属性说明
属性名称 | 属性类型 | 属性说明 |
栅格 | 布局设置 | 设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。 |
父级自定义属性 | 其它 | 因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。 |
自定义属性 | 其它 | 可以自定义给template中的标签添加自定义属性内容 |
轮播图项设置 | 基本设置 | 轮播图选项基本操作下面会详细讲解。 |
轮播图项设置,如下图:
- 快速添加:可快速添加轮播图的项,以换行,“、”符号分开,每个换行,“、”隔开的都是一个独立轮播图片。
- 添加:给轮播图添加一行
- 上传:点击可上传图片
- 文本框:可直接修改成网络图片地址
- 删除:删除轮播图的项
- 拖拽:拖拽轮播图展示顺序。