数据组件

1、数据组件-表格视图

在表单设计界面，在左边数据组件中找到表格视图组件,把组件拖到中间空白区域；

属性

（1）标签

表示该组件的标签显示内容；

显示标签：如果勾选就显示标签，如果不勾选就不显示标签；默认勾选。

（2）数据Key：默认自动生成。

（3）显示类型

可选类型有三个，分别为常规、子表单、列表；默认为常规。

（4）列字段

点击添加列字段，可选择添加单行文本，日期，时间，日期时间，文字链接，数值，开关和评分等字段。

在列字段后面可按住“”移动位置，点击“”复制字段和点击“”删除字段。

列字段1-单行文本

当选择单行文本时，默认添加的名为单行文本，可修改。点单行文本可以看到该字段的属性方法事件。

属性

1）标签

表示该组件的标签显示内容；

显示标签：如果勾选就显示标签，如果不勾选就不显示标签；默认勾选。

2）数据Key：默认自动生成，也可根据显示需求更改。

3）占位符：指单行文本占位提示信息，默认为空。

4）默认值：指默认显示值，默认为空。

5）格式：选择内容格式为文本、邮箱、手机、固话、密码；默认文本。

6）可清空：默认勾选，如过不勾选，该单行文本无清空内容功能。

7）后置元素

后置按钮1：默认不勾选，如果勾选则可输入按钮文本和按钮图标；

后置按钮2：默认不勾选，如果勾选则可输入按钮文本和按钮图标。

8）样式

头部图标：默认为空；

尾部图标：默认为空；

宽度：默认为空，单位px；

尺寸：可选择中等、小、迷你；默认小；

对齐方式：居左、居中、居右；默认居左。

9）约束

必填：表示单行文本内容是否必填，默认不勾选；

可见：表示单行文本是否在表单中可见，默认勾选；

禁用：表示单行文本是否在表单中禁用，默认不勾选；

只读：表示单行文本是否在表单中只读，默认不勾选；

最小长度：默认为0px；

最大长度：默认为1000px。

方法

无

事件

1）获得焦点时

2）失去焦点时

3）输入回车时

4）值改变时

5）值清空时

6）点击后置按钮1时

7）点击后置按钮2时

列字段2-日期

当选择日期时，默认添加的名为日期，可修改。点进去可以看到属性方法事件；

属性

1）标签

表示该组件的标签显示内容；

显示标签：如果勾选就显示标签，如果不勾选就不显示标签；默认勾选。

2）数据Key：默认自动生成。

3）显示类型：可选项有六个，分别为日期、周、月、年、多个日期、日期范围；默认值日期。

周起始日：表示一周的起始星期，可选择周一到周日。

4）占位符：指占位提示信息，默认为空。

5）可清空：表示选择内容可清空，默认开；

6）可输入：表示可输入日期，日期格式为标准格式，默认开。

7）样式

宽度：默认为空，单位px；

尺寸：默认为小，可选项有三个，分别为中等、小、迷你；

8）约束

必填：表示日期内容是否必填，默认不勾选；

可见：表示日期是否在表单中可见，默认勾选；

禁用：表示日期是否在表单中禁用，默认不勾选；

只读：表示日期是否在表单中只读，默认不勾选。

方法

无

事件

1）获得焦点时

2）失去焦点时

3）值改变时

列字段3-时间

当选择时间时，默认添加的名为时间，可修改。点进去可以看到属性方法事件；

属性

1）标签

表示该组件的标签显示内容；

显示标签：如果勾选就显示标签，如果不勾选就不显示标签；默认勾选。

2）数据Key：默认自动生成。

3）显示类型：可选项有两个，分别为时间、时间范围；默认值时间。

4）占位符：指占位提示信息，默认为空。

5）可清空：表示选择内容可清空，默认开；

6）可输入：表示可输入时间，默认开。

7）样式

宽度：默认为空，单位px；

尺寸：默认为小，可选项有三个，分别为中等、小、迷你。

8）约束

必填：表示时间内容是否必填，默认不勾选；

可见：表示时间是否在表单中可见，默认勾选；

禁用：表示时间是否在表单中禁用，默认不勾选；

只读：表示时间是否在表单中只读，默认不勾选。

方法

无

事件

1）获得焦点时

2）失去焦点时

3）值改变时

列字段4-日期时间

当选择日期时间时，默认添加的名为日期时间，可修改。点进去可以看到属性方法事件；

属性

1）标签

表示该组件的标签显示内容；

显示标签：如果勾选就显示标签，如果不勾选就不显示标签；默认勾选。

2）数据Key：默认自动生成。

3）显示类型：可选项有两个，分别为日期时间、日期时间范围；默认值日期时间。

周起始日：表示一周的起始星期，可选择周一到周日。

4）占位符：指占位提示信息，默认为空。

5）可清空：表示选择内容可清空，默认开；

6）可输入：表示可输入日期时间，默认开。

7）样式

宽度：默认为空，单位px；

尺寸：默认为小，可选项有三个，分别为中等、小、迷你；

8）约束

必填：表示日期时间内容是否必填，默认不勾选；

可见：表示日期时间是否在表单中可见，默认勾选；

禁用：表示日期时间是否在表单中禁用，默认不勾选；

只读：表示日期时间是否在表单中只读，默认不勾选。

方法

无

事件

1）获得焦点时

2）失去焦点时

3）值改变时

列字段5-文字链接

当选择文字链接时，默认添加的名为文字链接，可修改。点进去可以看到属性方法事件；

属性

1）标签

表示该组件的标签显示内容；

显示标签：如果勾选就显示标签，如果不勾选就不显示标签；默认勾选。

2）数据Key：默认自动生成。

3）链接名称：默认“请输入链接名称”。

4）链接类型

一共有六种类型，分别为默认、主要、成功、警告、危险、信息；

5）站内链接：在本站内部链接，开启后可选择链接界面。

6）站外链接：可自行输入，默认“http://www.baidu.com”。

7）样式：

图标：默认为空；

宽度：默认为空；

下划线：默认开启。

8）约束

可见：表示文字链接是否在表单中可见，默认勾选；

禁用：表示文字链接是否在表单中禁用，默认不勾选。

方法

无

事件

无

列字段6-数值

当选择数值时，默认添加的名为数值，可修改。点进去可以看到属性方法事件；

属性

1）标签

表示该组件的标签显示内容；

显示标签：如果勾选就显示标签，如果不勾选就不显示标签；默认勾选。

2）数据Key：默认自动生成，也可根据显示需求更改。

3）默认值：指默认显示值，默认为空。

4）空值：默认不勾选，如果勾选，则此计数器可为空.

5）精度：表示数值精度，默认值为0，即数值为整数。

6）步进：表示计数器每次增加或减少的数值，默认值为1，即每次加1。

7）最小值：可设置计数器的最小值，默认为空。

8）最大值：可设置计数器的最大值，默认为空。

9）显示方式：可选择计数器的显示方式：上下、左右；默认上下。

10）样式

尺寸：可选择个中等、小、迷你；默认为小。

11）约束

必填：表示计数器内容是否必填，默认不勾选；

可见：表示计数器是否在表单中可见，默认勾选；

禁用：表示计数器是否在表单中禁用，默认不勾选；

只读：表示计数器是否在表单中只读，默认不勾选。

方法

设置焦点；

事件

1）获得焦点时

2）失去焦点时

3）值改变时

列字段7-开关

当选择开关时，默认添加的名为开关，可修改。点进去可以看到属性方法事件；

属性

1）标签

表示该组件的标签显示内容；

显示标签：如果勾选就显示标签，如果不勾选就不显示标签；默认勾选。

2）数据Key：默认自动生成。

3）默认值：默认为开；

4）打开时的文字描述：默认值为开，可修改；

5）关闭时的文字描述：默认值为关，可修改；

6）打开时的颜色：默认值为“”；

7）关闭时的颜色：默认值为“”；

8）样式

宽度：默认40px；

9）约束

必填：表示开关内容是否必填，默认不勾选；

可见：表示开关是否在表单中可见，默认勾选；

禁用：表示开关是否在表单中禁用，默认不勾选；

方法

无

事件

1）值改变时

列字段8-评分

当选择评分时，默认添加的名为评分，可修改。点进去可以看到属性方法事件；

属性

1）标签

表示该组件的标签显示内容；

显示标签：如果勾选就显示标签，如果不勾选就不显示标签；默认勾选。

2）数据Key：默认自动生成。

3）默认值：0；

4）低分界限值：2；

5）高分界限值：4；

6）最大分值：设置评分最大值，默认值为5；

7）约束

必填：表示评分内容是否必填，默认不勾选；

可见：表示评分是否在表单中可见，默认勾选；

禁用：表示评分是否在表单中禁用，默认不勾选；

方法

无

事件

1）值改变时

（5）操作项

点击添加操作项，可添加操作项，默认为操作项，可改名；

在操作项后面可按住‘’‘’移动位置，点击‘’‘’复制和点击‘’‘’删除。

（6）配置

斑马纹：表示表格背景显示斑马纹，默认勾选；

边框：表示显示边框，默认勾选；

多选项：表示数据可多选，默认不勾选；

排序：表示添加排序符号，默认勾选；

序列号：在数据前端加序列号，默认不勾选；

控制列显示：表示可控制列显示字段，默认不勾选；

合计行：表示增加计算总数的单行，默认不勾选；

列左侧固定：可选择列数，默认为空；

列右侧固定：可选择列数，默认为空。

（7）分页

默认为开，可修改，下面默认显示总数，换页，页数，行数；

（8）服务器端分页

默认为true，可修改；

（9）样式   默认为像素（315px）

像素px：默认为315，可修改；

百分比%：默认为100，可修改；

是否透明背景：默认为false；

当前已激活行颜色：默认为#E8F4FF，可选择；

表头颜色：默认为白色，可选择；

表头高度：默认为空，可修改；

表体颜色：默认为白色，可选择；

表体高度：默认为空，可修改；

（10）约束  

可见：表示是否在表单中可见，默认勾选；

（11）其他属性  

树形子节点数据：默认为关；

为开时，可以设置子节点键名和key值。

方法

（1）取消勾选项状态；

（2）获取当前行序列号；

（3）改变行选中状态；

（4）移除某行；

（5）清除当前项（单选）。

事件

（1）当前行变化时；

（2）选择项变化时；

（3）单击排序时；

（4）显示数量改变时；

（5）当前页数改变时。

2、数据组件-卡片列表

在表单设计界面，在左边数据组件中找到卡片列表组件,把组件拖到中间空白区域；

属性

（1）标签

表示该组件的标签显示内容；

显示标签：如果勾选就显示标签，如果不勾选就不显示标签；默认勾选。

（2）数据Key：默认自动生成。

（3）操作项

点击“添加操作项”时，可以添加一个操作项；

拖动“”按钮可以修改操作项的顺序；

点击“”按钮可以复制一个操作项；

点击“”按钮可以删除一个操作项；

（4）描述项

数量：默认1，最多有2个；

（5）图标：默认选择；

颜色：默认值为“#909399”；

背景色：默认值为“#FFFFFF”；

边框颜色：默认值为“#909399”

形状：可选项有两个，分别为方形和圆形，默认为方形；

（6）标记：默认选择；

（7）配置

宽度：设置卡片宽度，默认为空；

高度：设置卡片高度，默认70px；

下边距：默认为0px。

（8）约束

可见：表示是否在表单中可见，默认勾选；

方法

无

事件

（1）单击时

3、数据组件-进度条

在表单设计界面，在左边数据组件中找到进度条组件,把组件拖到中间空白区域；

属性

（1）标签

表示该组件的标签显示内容；

显示标签：如果勾选就显示标签，如果不勾选就不显示标签；默认勾选。

（2）数据Key：默认自动生成。

（3）默认值：0；

（4）进度条的宽度：默认为6；

（5）格式

一共有三种选择，分别为line、circle和dashboard，默认为line；

文字在进度条内：默认为关；

显示文字内容：默认为开；

背景色：#409EFF

文字颜色：#606266

（6）约束

可见：表示是否在表单中可见，默认勾选；

方法

无

事件

无

4、数据组件-树

在表单设计界面，在左边数据组件中找到树组件,把组件拖到中间空白区域；

属性

（1）标签

表示该组件的标签显示内容；

显示标签：如果勾选就显示标签，如果不勾选就不显示标签；默认勾选。

（2）数据Key：默认自动生成。

（3）显示字段：默认值name，可修改；

（4）图标：默认icon，可修改；

（5）父标识字段：默认parentId，可修改；

（6）操作项

点击“添加操作项”时，可以添加一个操作项；

拖动“”按钮可以修改操作项的顺序；

点击“”按钮可以复制一个操作项；

点击“”按钮可以删除一个操作项；

（7）默认展开所有节点：默认为关；

（8）同级只展开一个节点：默认为关；

（9）图标颜色：无；

（10）内容：给树一些固定的节点值；

点击“添加”按钮，可以给当前节点添加一个下级节点；

点击“删除”按钮，可以删除当前节点以及当前节点的所有下级节点；

点击“添加外部节点”按钮，可以添加一个一级节点。

（11）当前选中节点显示值

点击内容中的节点时，节点的值和图标显示在文本框中，可以修改节点的值和图标。

（12）配置

宽度：设置树的宽度，默认为空；

高度：设置树的高度，默认为空。

（13）约束

可见：表示是否在表单中可见，默认勾选。

方法

（1）获取当前节点

（2）清空当前节点

事件

（1）节点点击时

5、数据组件-头像

在表单设计界面，在左边数据组件中找到头像组件,把组件拖到中间空白区域

属性

（1）标签

表示该组件的标签显示内容；

显示标签：如果勾选就显示标签，如果不勾选就不显示标签；默认勾选。

（2）数据Key：默认自动生成。

（3）头像类型

有三种选择，分别为图片、图标和文字，默认为图片；

图片：头像类型为图标时显示，默认值为https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png

图标：头像类型为图标时显示，默认值为el-icon-user-solid；

文字：头像类型为文字时显示，默认值为User。

（4）图片填充方式

有五种选择，分别是填充、包含、覆盖、无和降低，默认为填充；

（5）形状

有两种选择，分别是圆形和方形，默认是圆形；

（6）尺寸

有三种选择，分别是大、中等和小，默认是中等；

（7）约束

可见：表示是否在表单中可见，默认勾选。

方法

无

事件

（1）加载失败