简搭云科技有限公司 简搭云科技有限公司
首页 (opens new window)
操作指南
  • 可视化表单
  • 优秀大屏设计
  • 3D样例
  • 视屏教学
  • 可视化表单系统 (opens new window)
  • 可视化大屏系统 (opens new window)
  • 可视化表单系统
  • 可视化大屏
  • 产品组合商业授权
  • 联系我们
  • 可视化表单系统 (opens new window)
  • 可视化大屏系统 (opens new window)

长沙市简搭云科技有限公司

长沙市简搭云科技有限公司
首页 (opens new window)
操作指南
  • 可视化表单
  • 优秀大屏设计
  • 3D样例
  • 视屏教学
  • 可视化表单系统 (opens new window)
  • 可视化大屏系统 (opens new window)
  • 可视化表单系统
  • 可视化大屏
  • 产品组合商业授权
  • 联系我们
  • 可视化表单系统 (opens new window)
  • 可视化大屏系统 (opens new window)
  • 简搭云介绍

  • 可视化表单

    • 01.表单设计器介绍
    • 02.表单布局控件属性介绍
    • 03.表单基础控件属性介绍
      • 基础控件
        • Lable标签
        • 占位组件
        • 超链接
        • 文字描述
        • 图标选择
        • 条形码
        • 二维码
        • 分割线
        • 隐藏文本
        • 自定义组件
        • 单行文本
        • 多行文本
        • 下拉列表
        • 日期控件
        • 单选控件
        • 多选控件
        • 按钮控件
        • 开关控件
        • 滑块控件
        • 颜色选择控件
        • 富文本控件
        • 级联组件
        • 签名控件
        • 定位控件
        • 评分控件
        • 经纬度组件
        • 数字控件
        • 图片展示
        • 时间选择控件
        • 图片控件
        • 上传控件
        • 轮播图
    • 04.表单平台控件属性介绍
    • 05.表单图表控件属性介绍
    • 06.逻辑编排、事件、源码编辑
    • 07.表单配置
    • 08.打印设计介绍
    • 09.共享组件
    • 10.列表设计
  • 可视化大屏

  • 动态DB接口

  • 流程平台

  • 链接器、集成自动化、定时任务

  • 系统管理操作

  • 问卷调查

  • 透视报表设计、Oss配置、系统参数说明

  • 应用市场与应用模块

  • 操作手册
  • 可视化表单
简搭云软件
2021-09-22
国家能源集团
成都智慧城市
优必联智能装备
河北启派科技
深圳市量信科技
杭州市奥哲软件
绍兴瑞楠
麓谷云
南京优玛软件

03.表单基础控件属性介绍

# 基础控件

# Lable标签

Lable标签设计界面展示效果:

alt text

Lable标签属性说明

属性字段
属性分类
属性说明
标题名称
基本设置
对Lable控件定义一个标题,标题为空时不显示。
绑定字段
基本设置
存入数据库的字段名称,也是表单变量的名称。
默认值
基本设置
设置默认显示的内容
是否隐藏
基本设置
控制控件是否隐藏和显示
显示标题
基本设置
控制控件的标题是否显示和隐藏
是否保存
基本设置
控制控件是否创建数据库字段,对其进行保存
数据长度
基本设置
控制控件创建数据库字段长度。
标题独行
基本设置
控制控件的标题是否独立一行显示。
对齐方式
布局设置
控制控件的文本对齐方式
栅格
布局设置
控制模块占整个屏幕的比例,不同设备设计模式下,对应栅格设置是不同的
标题宽度
布局设置
控制标题展示的宽度
自定义属性
其它
具体的请参考【1.1模块控件的自定义属性说明】
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。

# 占位组件

占位组件设计界面展示效果:

alt text

占位组件属性说明

属性字段
属性分类
属性说明
是否隐藏
基本属性
控制是否显示或者隐藏
栅格
布局设置
控制模块占整个屏幕的比例,不同设备设计模式下,对应栅格设置是不同的
自定义属性
其它
具体的请参考【1.1模块控件的自定义属性说明】
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。

# 超链接

超链接设计界面展示效果:

alt text

超链接属性说明

属性字段
属性分类
属性说明
标题名称
基本设置
对控件定义一个标题,标题为空时不显示。
绑定字段
基本设置
设置跳转的url地址
Target
基本设置
设置跳转的模式
连接类型
基本设置
设置超链接的展示类型
是否只读
基本设置
控制控件是否可以编辑或者只读
是否下滑线
基本设置
超链接是否有下划线
显示标题
基本设置
控制控件的标题是否显示/隐藏
权限标识
基本设置
给控件设置一个权限标识,在菜单中添加改权限标识,就可以根据角色授权,控制控件是否显示了。
是否隐藏
基本设置
控制控件的显示或者隐藏
对齐方式
布局设置
针对控件的标题设置对齐方式。
栅格
布局设置
控制模块占整个屏幕的比例,不同设备设计模式下,对应栅格设置是不同的
自定义属性
其它
具体的请参考【1.1模块控件的自定义属性说明】
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。

# 文字描述

文字描述设计界面展示效果:

alt text

文字描述属性说明

属性字段
属性分类
属性说明
默认值
基本设置
点击编辑弹出富文本,对其默认值设置。
标题名称
基本设置
设置控件的标题名称,标题的名称为空不显示标题
是否隐藏
基本设置
设置控件隐藏或者显示
显示标题
基本设置
设置标题是否显示或隐藏
对齐方式
基本设置
设置标题的对齐方式
栅格
基本设置
控制模块占整个屏幕的比例,不同设备设计模式下,对应栅格设置是不同的
标题宽度
基本设置
设置标题所占的宽度
自定义属性
其它
具体的请参考【1.1模块控件的自定义属性说明】
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。

# 图标选择

图标选择组件设计界面展示效果: alt text 图标选择属性说明

属性字段
属性分类
属性说明
默认值
基本设置
点击弹出图标选择页面,选择一个图标做为默认值
标题名称
基本设置
设置控件的标题名称,标题的名称为空不显示标题
绑定字段
基本设置
设置控件的绑定字段名称和vue代码中字段变量名称
是否隐藏
基本设置
设置控件隐藏或者显示
显示标题
基本设置
设置标题是否显示或隐藏
权限标识
基本设置
给控件设置一个权限标识,在菜单中添加改权限标识,就可以根据角色授权,控制控件是否显示了。
对齐方式
基本设置
设置标题的对齐方式
栅格
基本设置
控制模块占整个屏幕的比例,不同设备设计模式下,对应栅格设置是不同的
标题宽度
基本设置
设置标题所占的宽度
自定义属性
其它
具体的请参考【1.1模块控件的自定义属性说明】
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。

# 条形码

条形码组件设计界面展示效果:

alt text

条形码组件属性说明

属性字段
属性分类
属性说明
默认值
基本设置
设置条形码的默认值,扫码后的值
标题名称
基本设置
设置控件的标题名称,标题的名称为空不显示标题
绑定字段
基本设置
设置控件的绑定字段名称和vue代码中字段变量名称
是否隐藏
基本设置
设置控件隐藏或者显示
显示标题
基本设置
设置标题是否显示或隐藏
对齐方式
基本设置
设置标题的对齐方式
栅格
基本设置
控制模块占整个屏幕的比例,不同设备设计模式下,对应栅格设置是不同的
高度
基本设置
设置条形码的高度
自定义属性
其它
具体的请参考【1.1模块控件的自定义属性说明】
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。

# 二维码

二维码组件设计界面展示效果:

alt text

二维码组件属性说明

属性字段
属性分类
属性说明
默认值
基本设置
设置二维码的默认值,扫码后的值
标题名称
基本设置
设置控件的标题名称,标题的名称为空不显示标题
绑定字段
基本设置
设置控件的绑定字段名称和vue代码中字段变量名称
是否隐藏
基本设置
设置控件隐藏或者显示
显示标题
基本设置
设置标题是否显示或隐藏
二维码颜色
基本设置
设置二维码的颜色
二维码背景颜色
基本设置
设置二维码的背景颜色
对齐方式
基本设置
设置标题的对齐方式
栅格
基本设置
控制模块占整个屏幕的比例,不同设备设计模式下,对应栅格设置是不同的
高度
基本设置
设置二维码的高度
宽度
基本设置
设置二维码的宽度
自定义属性
其它
具体的请参考【1.1模块控件的自定义属性说明】

# 分割线

分割线组件设计界面展示效果:

alt text

分割线属性说明

属性字段
属性分类
属性说明
默认值
基本设置
设置分割线的标题名称
是否隐藏
基本设置
设置控件隐藏或者显示
Target
基本设置
设置标题的位置
栅格
基本设置
控制模块占整个屏幕的比例,不同设备设计模式下,对应栅格设置是不同的
高度
基本设置
设置二维码的高度
宽度
基本设置
设置二维码的宽度
自定义属性
其它
具体的请参考【1.1模块控件的自定义属性说明】

# 隐藏文本

隐藏文本组件设计界面展示效果:

alt text

隐藏文本属性说明

属性字段
属性分类
属性说明
默认值
基本设置
设置二维码的默认值,扫码后的值
标题名称
基本设置
设置控件的标题名称,标题的名称为空不显示标题
数据长度
基本设置
设置数据库字段的长度
绑定字段
基本设置
设置vue代码变量名称和数据库字段名称
栅格
基本设置
控制模块占整个屏幕的比例,不同设备设计模式下,对应栅格设置是不同的
自定义属性
其它
具体的请参考【1.1模块控件的自定义属性说明】

# 自定义组件

自定义组件设计界面展示效果:

alt text

自定义组件属性说明

属性字段
属性分类
属性说明
标题名称
基本设置
设置控件的标题名称,标题的名称为空不显示标题
默认值
基本设置
设置字段的默认值
数据长度
基本设置
设置数据库字段的长度
绑定字段
基本设置
设置vue代码变量名称和数据库字段名称
自定义代码
基本设置
设置自定义vue代码。
是否隐藏
基本设置
设置控件是否隐藏
显示标题
基本设置
设置控件的标题是否显示
标题独行
基本设置
设置控件的标题是否独行
栅格
布局设置
控制模块占整个屏幕的比例,不同设备设计模式下,对应栅格设置是不同的
对齐方式
布局设置
设置控件的标题对齐方式
标题宽度
布局设置
设置标题的宽度
自定义属性
其它
具体的请参考【1.1模块控件的自定义属性说明】
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。

# 单行文本

单行文本:单行文本框显示界面效果如下:

alt text

属性说明:属性参考资料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)

# 多行文本

多行文本框:拖拽设计区域显示效果,如下。

alt text

多行文本框属性如下:

属性名称
属性分类
属性说明
标题名称
基本设置
控件的标题,当标题为空不显示标题栏
默认值
基本设置
界面初始化值
提示词
基本设置
当控件内容为空时显示文字
绑定字段
基本设置
设置vue代码变量名称和数据库字段名称
数据长度
基本设置
控制文本输入字符的长度和数据库字段长度
最小行数
基本设置
3 默认展示显示多少行的高度
最大行数
基本设置
1000展示1000行的高度
是否必填
基本设置
控制控件是否必填
显示字数
基本设置
控制控件是否显示字数
是否只读
基本设置
控制控件是否只读
是否隐藏
基本设置
控制控件是否隐藏/显示
显示标题
基本设置
控制是否显示标题
标题独行
基本设置
控制控件的标题是否独行展示
栅格
布局设置
设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。
对齐方式
布局设置
控制标题的对齐方式
标题宽度
布局设置
控制标题的显示宽度
自定义属性
其它
可以自定义给template中的标签添加自定义属性内容,具体其它属性请参考
https://element.eleme.cn/#/
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。

多文本框事件说明:

事件名称
说明
Change
文本框内容变化时触发事件
Blur
在 Input 失去焦点时触发
Focus
在 Input 获得焦点时触发
Input
在 Input 失去焦点时触发
Clear
在点击由 clearable 属性生成的清空按钮时触发

点击【添加事件】弹出添加额外的事件 具体拥有那些事件请参考具体事件请参考

https://element.eleme.cn/#/zh-CN/component/input (opens new window)

# 下拉列表

下拉列表:设计区域展示效果,如图:

alt text

属性说明:

属性名称
属性类型
属性说明
标题名称
基本设置
控件的标题,当标题为空不显示标题栏
提示词
基本设置
设置控件的提示词,没有设置值时显示
绑定字段
基本设置
设置vue代码变量名称和数据库字段名称
数据长度
基本设置
设置下拉列表数据库字段长度
是否初始化加载
基本设置
如果配置数据源绑定数据,设置是否初始化从数据源中加载数据
是否可多选
基本设置
控制下拉列表是否支持多选
是否可搜索
基本设置
控制下拉列表是否显示搜索功能
是否必填
基本设置
控制表单验证是否必填
是否只读
基本设置
控制控件是否只读
collapse-tags
基本设置
多选时是否将选中值按文字的形式展示
一键清空
基本设置
是否显示清空按钮
是否隐藏
基本设置
控制控件是否隐藏
显示标题
基本设置
控制标题是否显示
标题独行
基本设置
控制标题是否独行展示
控件尺寸
布局设置
显示控件显示的尺寸
对齐方式
布局设置
控制标题的对齐方式
栅格
布局设置
设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。
标题宽度
布局设置
控制标题占用宽度
自定义属性
其它
可以自定义给template中的标签添加自定义属性内容
数据类型
基本设置
数据类型分为动态数据和静态数据,
动态数据:是从Api接口获取数据
静态数据:在线编写的下来选项。
字典数据:控制控件从数据字典中加载绑定
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。

数据类型:动态数据绑定如下图:

请求地址:点击弹出选择调用后端的Api接口。点击弹出如下图:

点击选择,选择请求后端接口的地址

过滤条件配置:

条件字段是Api请求的参数字段,条件值可以是url参数,表单中的变量,自定义变量,环境变量。

参数为表单中的变量时,当对应表单变量发送变化,就会触发接口该接口的请求,从而达到各种联动效果,级联效果。

显示字段:是为了选择数据时显示的那个字段。

赋值规则设置:当下拉列表选择值后,将选择对应行数据进行赋值到其它控件中。

事件说明:

字段名称
字段说明
Change
选择不同值时触发(双击控件也可以创建事件)
Blur
失去焦点时触发
Focus
得到焦点时触发

点击【添加事件】弹出添加额外的事件 具体拥有那些事件请参考具体事件请参考

https://element.eleme.cn (opens new window)

# 日期控件

日期控件:设计区域展示效果,如图:

alt text

属性说明

属性字段
属性分类
属性字段说明
标题名称
基本设置
控件的标题,当标题为空不显示标题栏
提示词
基本设置
控件未选择日期前,初始化提示词
格式化串
基本设置
设置显示日期的格式
控件类型
基本设置
分为选日期,选年,选月份、选星期、日期范围,点击弹出选择不同日期格式。
绑定字段
基本设置
设置vue代码变量名称和数据库字段名称
数据长度
基本设置
设置数据库字段长度
是否必填
基本设置
设置提交时验证必填
是否只读
基本设置
设置控件是否只读
是否隐藏
基本设置
设置控件是否隐藏
显示标题
基本设置
设置控件标题是否显示
标题是否独行
基本设置
设置标题是否独行展示
对齐方式
布局设置
控制标题的对齐方式
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。
自定义属性
其它
可以自定义给template中的标签添加自定义属性内容
栅格
布局设置
设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。
标签宽度
布局设置
设置标题的宽度

事件说明

字段名称
字段说明
Change
选择不同值时触发(双击控件也可以创建事件)
Blur
失去焦点时触发
Focus
得到焦点时触发

点击【添加事件】弹出添加额外的事件 具体拥有那些事件请参考具体事件请参考

https://element.eleme.cn (opens new window)

# 单选控件

单选控件:设计区域展示效果,如图:

alt text

属性说明

属性字段
属性类型
属性字段说明
标题名称
基本设置
控件的标题,当标题为空不显示标题栏
绑定字段
基本设置
设置vue代码变量名称和数据库字段名称
数据长度
基本设置
设置数据库字段长度
数据类型
基本设置
数据类型分为动态数据和静态数据,
动态数据:是从Api接口获取数据
静态数据:在线编写的下来选项
字典数据:是从数据字典中读取数据
初始加载
基本设置
如果数据类型是Api数据,设置页面加载时是否加载Api中的数据进行绑定。
是否只读
基本设置
设置控件是否只读
是否必填
基本设置
设置提交时验证必填
IsButton
基本设置
是否以按钮模式显示。
是否隐藏
基本设置
设置控件是否隐藏
显示标题
基本设置
设置标题是否显示
标题独行
基本设置
设置标题是否独行展示
标题宽度
布局设置
可以自定义给template中的标签添加自定义属性内容
对齐方式
布局设置
设置控件标题对齐方式
选项行展示
布局设置
设置控件选项是否独立一行展示
栅格
布局设置
设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。
自定义属性
其它
可以自定义给template中的标签添加自定义属性内容

数据类型:动态数据绑定如下图:

请求地址:点击弹出选择调用后端的Api接口。点击弹出如下图:

点击选择,选择请求后端接口的地址

过滤条件配置:

条件字段是Api请求的参数字段,条件值可以是url参数,表单中的变量,自定义变量,环境变量。

参数为表单中的变量时,当对应表单变量发送变化,就会触发接口该接口的请求,从而达到各种联动效果,级联效果。

显示字段:是为了选择数据时显示的那个字段。

赋值规则设置:当下拉列表选择值后,将选择对应行数据进行赋值到其它控件中。

事件说明:

事件名称
说明
Change
选择的事件

点击【添加事件】弹出添加额外的事件 具体拥有那些事件请参考具体事件请参考

https://element.eleme.cn (opens new window)

# 多选控件

多选控件:设计区域展示效果,如下图

alt text

属性
属性类型
说明
标题名称
基本设置
控件的标题,当标题为空不显示标题栏
绑定字段
基本设置
设置vue代码变量名称和数据库字段名称
数据类型
基本设置
数据类型分为动态数据和静态数据,
动态数据:是从Api接口获取数据
静态数据:在线编写的下来选项
字典数据:是从数据字典中读取数据
初始加载
基本设置
如果数据类型是Api数据,设置页面加载时是否加载Api中的数据进行绑定。
是否只读
基本设置
设置控件是否只读
是否必填
基本设置
设置提交时验证必填
IsButton
基本设置
是否以按钮模式显示。
是否隐藏
基本设置
设置控件是否隐藏
显示标题
基本设置
设置标题是否显示
标题独行
基本设置
设置标题是否独行展示
标题宽度
布局设置
可以自定义给template中的标签添加自定义属性内容
对齐方式
布局设置
设置控件标题对齐方式
选项行展示
布局设置
设置控件选项是否独立一行展示
栅格
布局设置
设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。
自定义属性
其它
可以自定义给template中的标签添加自定义属性内容

数据类型:动态数据绑定如下图:

请求地址:点击弹出选择调用后端的Api接口。点击弹出如下图:

点击选择,选择请求后端接口的地址

过滤条件配置:

条件字段是Api请求的参数字段,条件值可以是url参数,表单中的变量,自定义变量,环境变量。

参数为表单中的变量时,当对应表单变量发送变化,就会触发接口该接口的请求,从而达到各种联动效果,级联效果。

显示字段:是为了选择数据时显示的那个字段。

赋值规则设置:当下拉列表选择值后,将选择对应行数据进行赋值到其它控件中。

事件说明:

事件名称
说明
Change
选择的事件

点击【添加事件】弹出添加额外的事件 具体拥有那些事件请参考具体事件请参考

https://element.eleme.cn (opens new window)

# 按钮控件

按钮控件实际为按钮组控件,拖拽到设计器展示效果:

alt text

属性名称
属性分类
说明
按钮项
基本设置
对按钮组件进行维护,新增,删除,修改。
是否隐藏
基本设置
控制隐藏或显示
栅格
布局设置
设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。

按钮项编辑如下:

【添加按钮】:点击新增一个按钮

图标:点击可弹出图标选择。

文本框:可修改按钮的名称

修改:点击切换到具体按钮的操作

删除:删除该按钮。

拖拽:拖拽设置按钮的显示顺序

点击【修改】会切换到具体选中按钮,显示按钮的属性,按钮属性截图如下:

属性说明:

属性字段
属性类型
说明
标题名称
基本设置
按钮显示名称
图标选择
布局设置
按钮显示图标
按钮类型
基本设置
按钮显示类型text,primary,success、info、
Warning、danger
权限标识
基本设置
给控件设置一个权限标识,在菜单中添加改权限标识,就可以根据角色授权,控制控件是否显示了。
自定义属性
其它
可以自定义给template中的标签添加自定义属性内容
Pian
布局设置
是否朴素按钮
round
布局设置
是否圆角按钮
circle
布局设置
是否圆形按钮
控件尺寸
布局设置
按钮显示大小,分为:中等,小型,超小
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。
网定义class 编写class控制整个组件的样式。

按钮事件说明

事件名称
事件说明
Click
单机事件
Dbclick
双击事件
Blur
失去焦点
Focus
得到焦点事件

点击【添加事件】弹出添加额外的事件 具体拥有那些事件请参考具体事件请参考

https://element.eleme.cn (opens new window)

# 开关控件

开关控件:拖拽到设计界面效果如下

alt text

开关属性说明

属性名称
属性类型
属性说明
标题名称
基本设置
控件的标题,当标题为空不显示标题栏
标签宽度
布局设置
标题占的宽度
栅格
布局设置
设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。
对齐方式
布局设置
设置控件标题的对齐方式
是否只读
基本设置
设置控件是否只读
默认值
基本设置
开关的默认值
开启颜色
基本设置
设置开启的颜色
关闭颜色
基本设置
设置关闭的颜色
绑定字段
基本设置
设置vue代码变量名称和数据库字段名称
是否隐藏
基本设置
设置控件是否隐藏
显示标题
基本设置
设置控件是否显示标题
标题独行
基本设置
设置标题是否独立一行展示
自定义属性
其它
可以自定义给template中的标签添加自定义属性内容
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。

事件说明

事件名称
事件说明
Change
当开关值改变的事件

点击【添加事件】弹出添加额外的事件 具体拥有那些事件请参考具体事件请参考

https://element.eleme.cn (opens new window)

# 滑块控件

滑块控件:拖拽到设计界面效果如下

alt text

滑块属性说明:

属性名称
属性类型
属性说明
控件标题
基本设置
控件的标题,当标题为空不显示标题栏
是否只读
基本设置
控制控件是否只读
默认值
基本设置
设置页面初始化的后的值
绑定字段
基本设置
设置vue代码变量名称和数据库字段名称
是否隐藏
基本设置
设置控件隐藏
显示标题
基本设置
设置控件标题是否显示
标题独行
基本设置
设置控件标题是否独行展示
标签宽度
布局设置
标题占的宽度
栅格
布局设置
设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。
自定义属性
其它
可以自定义给template中的标签添加自定义属性内容
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。
Min
基本设置
滑块最小值
Max
基本设置
滑块最大值
Step
基本设置
每次增加值
Range
基本设置
是否范围滑块
showstops
基本设置
是否显示间断点

# 颜色选择控件

颜色选择控件,拖拽到可视化表单界面效果如下:

alt text

颜色选择属性说明

属性名称
属性类型
属性说明
标题名称
基本设置
控件的标题,当标题为空不显示标题栏
是否只读
基本设置
控制控件是否只读
默认值
基本设置
设置控件的默认值
是否隐藏
基本设置
设置控件是否隐藏
显示标题
基本设置
设置控件的标题是否显示
绑定字段
基本设置
设置vue代码变量名称和数据库字段名称
数据长度
基本设置
设置控件的数据长度
标题独行
基本设置
设置控件的标题是否独行展示。
标签宽度
布局设置
标题占的宽度
栅格
布局设置
设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。
对齐方式
布局设置
控制控件是否只读
控件尺寸
布局设置
按钮显示大小,分为:中等,小型,超小
自定义属性
其它
可以自定义给template中的标签添加自定义属性内容
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。

# 富文本控件

富文本控件拖拽到可视化表单界面效果如下:

alt text

选中富文本框属性如下

属性名称
属性分类
属性说明
标题名称
基本设置
控件的标题,当标题为空不显示标题栏
提示词
基本设置
控件值为空时提示内容
是否必填
基本设置
设置控件是否必填
是否只读
基本设置
控制控件是否只读
绑定字段
基本设置
设置vue代码变量名称和数据库字段名称
是否隐藏
基本设置
设置控件是否隐藏或显示
显示标题
基本设置
设置控件的标题是否隐藏或显示
标题独行
基本设置
设置控件的标题是否独行展示
栅格
布局设置
设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。
标签宽度
布局设置
标题占的宽度
对齐方式
布局设置
控制标题的对齐方式
控件尺寸
布局设置
控制控件显示的大小
自定义属性
其它
可以自定义给template中的标签添加自定义属性内容
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。

# 级联组件

级联组件拖拽到可视化表单界面效果如下:

alt text

选中属性如下:

属性名称
属性分类
属性说明
标题名称
基本设置
控件的标题,当标题为空不显示标题栏
提示词
基本设置
控件值为空时提示内容
数据类型
基本设置
Api数据/静态数据
是否必填
基本设置
设置控件是否必填
是否只读
基本设置
控制控件是否只读
绑定字段
基本设置
设置vue代码变量名称和数据库字段名称
数据长度
基本设置
设置数据库字段的长度
是否隐藏
基本设置
设置控件是否隐藏或显示
显示标题
基本设置
设置控件的标题是否隐藏或显示
标题独行
基本设置
设置控件的标题是否独行展示
栅格
布局设置
设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。
标签宽度
布局设置
标题占的宽度
对齐方式
布局设置
控制标题的对齐方式
自定义属性
其它
可以自定义给template中的标签添加自定义属性内容
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。

# 签名控件

签名控件拖拽到设计区域展示效果如下:

alt text

属性说明:

属性名称
属性类型
属性说明
标题名称
基本设置
控件的标题,当标题为空不显示标题栏
是否必填
基本设置
提前前验证值是否必填
是否只读
基本设置
控制控件是否只读
绑定字段
基本设置
设置vue代码变量名称和数据库字段名称
是否隐藏
基本设置
控制控件是否隐藏
显示标题
基本设置
设置标题是否显示
标题独行
基本设置
设置标题是否独行展示
栅格
布局设置
设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。
对齐方式
布局设置
设置标题的对齐方式
高度
布局设置
设置数组签名组件的高度
标签宽度
布局设置
标题占的宽度
自定义属性
其它
可以自定义给template中的标签添加自定义属性内容
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。

# 定位控件

定位控件拖拽到设计区域展示效果如下:

alt text

属性说明:

属性名
属性类型
属性说明
标题名称
基本设置
控件的标题,当标题为空不显示标题栏
是否必填
基本设置
提前前验证值是否必填
是否只读
基本设置
控制控件是否只读
绑定字段
基本设置
设置vue代码变量名称和数据库字段名称
数据长度
基本设置
设置数据库字段的长度
是否隐藏
基本设置
设置控件是否隐藏
显示标题
基本设置
设置控件标题是否显示
标题独行
基本设置
设置控件标题是否独行展示
默认值
基本设置
设置控件初始化的值
标签宽度
布局设置
标题占的宽度
栅格
布局设置
设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。
对齐方式
布局设置
设置控件标题的对齐方式
自定义属性
其它
可以自定义给template中的标签添加自定义属性内容
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。

# 评分控件

评分控件拖拽到设计界面效果如下:

alt text

评分控件属性说明:

属性名称
属性分类
属性说明
标题名称
基本设置
控件的标题,当标题为空不显示标题栏
默认值
基本设置
设置控件的默认值
Max
基本设置
设置评分多少个星星
绑定字段
基本设置
设置vue代码变量名称和数据库字段名称
数据长度
基本设置
设置数据库字段的长度
是否只读
基本设置
控制控件是否只读
是否必填
基本设置
控制控件是否必填
是否隐藏
基本设置
控制控件是否隐藏
显示标题
基本设置
设置控件的标题是否显示
标题独行
基本设置
设置控件的标题是否独行展示
栅格
布局设置
设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。
对齐方式
布局设置
设置控件的标题对齐方式
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。
标签宽度
布局设置
标题占的宽度
自定义属性
其它
可以自定义给template中的标签添加自定义属性内容

# 经纬度组件

经纬度控件:通过高德地图组件选择位置,返回经纬度。如下图:

alt text

经纬度控件属性说明:

属性名称
属性分类
属性说明
标题名称
基本设置
控件的标题,当标题为空不显示标题栏
默认值
基本设置
设置控件的默认值
绑定字段
基本设置
设置vue代码变量名称和数据库字段名称
数据长度
基本设置
设置数据库字段的长度
是否只读
基本设置
控制控件是否只读
是否必填
基本设置
控制控件是否必填
是否隐藏
基本设置
控制控件是否隐藏
显示标题
基本设置
设置控件的标题是否显示
标题独行
基本设置
设置控件的标题是否独行展示
栅格
布局设置
设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。
对齐方式
布局设置
设置控件的标题对齐方式
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。
标签宽度
布局设置
标题占的宽度
自定义属性
其它
可以自定义给template中的标签添加自定义属性内容

# 数字控件

数字控件:即是数字输入控件,该控件只能输入数字。拖拽到设计界面效果如下:

alt text

数字控件属性如下:

属性名称
属性分类
属性说明
标题名称
基本设置
控件的标题,当标题为空不显示标题栏
栅格
布局设置
设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。
默认值
基本设置
默认初始化值
绑定字段
基本设置
设置vue代码变量名称和数据库字段名称
数据长度
基本设置
设置数据库字段的长度
Min
基本设置
输入最小值
Max
基本设置
输入最大值
保留几位小数
基本设置
设置数字控件保留几位小数
Step
基本设置
递增数值
是否必填
基本设置
提前前验证值是否必填
是否只读
基本设置
控制控件是否只读
是否隐藏
基本设置
设置控件是否隐藏
显示标题
基本设置
设置控件标题是否显示
标题独行
基本设置
设置标题是否独行展示
标签宽度
布局设置
标题占的宽度
对齐方式
布局设置
设置控件的标题对齐方式
控件尺寸
布局设置
设置控件显示尺寸
自定义属性
其它
可以自定义给template中的标签添加自定义属性内容
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。

# 图片展示

图片展示控件:拖拽到设计区域如下

alt text

图片属性说明

属性名称
属性类型
属性说明
标题名称
基本设置
控件的标题,当标题为空不显示标题栏
绑定字段
基本设置
设置vue代码变量名称和数据库字段名称
默认值
基本设置
设置加载的图片,也可以上传一张图片
是否隐藏
基本设置
设置控件是否隐藏显示
显示标题
基本设置
设置把标题是否显示
标题独行
基本设置
设置标题是否独行展示
宽度
布局设置
设置图片展示的宽度
高度
布局设置
设置图片展示的高度
对齐方式
布局设置
设置控件主题的对齐方式
自定义属性
 
可以自定义给template中的标签添加自定义属性内容
栅格
布局设置
设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。

# 时间选择控件

时间选择控件:拖拽到界面效果如下

alt text

属性说明:

属性名称
属性类型
属性说明
标题名称
基本设置
控件的标题,当标题为空不显示标题栏
是否必填
基本设置
设置控件必填,提交时会验证数据必填。
是否只读
基本设置
设置控件只读,不可选择
绑定字段
基本设置
设置vue代码变量名称和数据库字段名称
是否隐藏
基本设置
设置控件是否隐藏
显示标题
基本设置
设置控件的标题是否显示
是否独行
基本设置
设置控件的标题是否可独行展示
栅格
布局设置
设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。
对齐方式
布局设置
控制控件标题的对齐方式
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。
标签宽度
布局设置
标题占的宽度
自定义属性
其它
可以自定义给template中的标签添加自定义属性内容

# 图片控件

上传控件:拖拽到可视化界面图如下

alt text

属性说明:

属性名称
属性类型
属性说明
标题名称
基本设置
控件的标题,当标题为空不显示标题栏
是否必填
基本设置
设置控件必填,提交时会验证数据必填。
是否只读
基本设置
设置控件只读,不可选择
绑定字段
基本设置
设置vue代码变量名称和数据库字段名称
最多上传文件数
基本设置
设置图片上传最多数量设置
文件大小
基本设置
设置文件上传大小,单位为MB
是否隐藏
基本设置
设置控件是否隐藏
显示标题
基本设置
设置控件的标题是否显示
是否独行
基本设置
设置控件的标题是否可独行展示
栅格
布局设置
设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。
对齐方式
布局设置
控制控件标题的对齐方式
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。
标签宽度
布局设置
标题占的宽度
自定义属性
其它
可以自定义给template中的标签添加自定义属性内容

# 上传控件

上传控件:拖拽到可视化界面图如下

alt text

控件属性如下

属性名称
属性类型
属性说明
标题名称
基本设置
控件的标题,当标题为空不显示标题栏
是否必填
基本设置
设置控件必填,提交时会验证数据必填。
是否只读
基本设置
设置控件只读,不可选择
绑定字段
基本设置
设置vue代码变量名称和数据库字段名称
最多上传文件数
基本设置
设置图片上传最多数量设置
文件大小
基本设置
设置文件上传大小,单位为MB
上传文件格式
基本设置
配置可上传的文件格式
是否隐藏
基本设置
设置控件是否隐藏
显示标题
基本设置
设置控件的标题是否显示
是否独行
基本设置
设置控件的标题是否可独行展示
栅格
布局设置
设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。
对齐方式
布局设置
控制控件标题的对齐方式
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。
标签宽度
布局设置
标题占的宽度
自定义属性
其它
可以自定义给template中的标签添加自定义属性内容

# 轮播图

轮播图:拖拽到可视化界面图如下

alt text

控件属性如下

属性说明

属性名称
属性类型
属性说明
栅格
布局设置
设置控件占父控件比例宽度,分成24个比例当PC,Ipad,手机模式下栅格是不一样的。
父级自定义属性
其它
因为自定义组件是被外面的div进行嵌套的,主要用于给外网定义class 编写class控制整个组件的样式。
自定义属性
其它
可以自定义给template中的标签添加自定义属性内容
轮播图项设置
基本设置
轮播图选项基本操作下面会详细讲解。

轮播图项设置,如下图:

  • 快速添加:可快速添加轮播图的项,以换行,“、”符号分开,每个换行,“、”隔开的都是一个独立轮播图片。
  • 添加:给轮播图添加一行
  • 上传:点击可上传图片
  • 文本框:可直接修改成网络图片地址
  • 删除:删除轮播图的项
  • 拖拽:拖拽轮播图展示顺序。
02.表单布局控件属性介绍
04.表单平台控件属性介绍

← 02.表单布局控件属性介绍 04.表单平台控件属性介绍→

简搭云软件 | Copyright © 2021-2025 长沙市简搭云科技有限公司
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×