轮播表格__旧版本

文档基于轮播表格_旧版本v1.20.9版本

组件说明

轮播表格组件整体结构如组件结构图所示，组件支持列表内容支持超链接配置，同时也支持图片格式的列表内容，轮播表格通过轮播动画的方式，将数据信息以列表的形式展示在可视化应用中。

组件结构

*轮播表格组件结构说明

效果案例

*轮播表格效果案例

一、样式

在样式中可以设置组件的基本属性、组件、表格、列设置和条目高亮。

1、基本属性

位置尺寸

位置包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。

尺寸包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

基本柱状图组件尺寸不影响组件内容显示、组件动画。

默认隐藏

勾选之后在初始加载时组件默认隐藏且关闭回调触发，通常用来配合显隐控制，如【选项卡】组件进行显隐切换。

2、组件

在组件中可针对轮播表格全局、动画、选择和链接四项进行设置。

全局

默认回调

首行回调

轮播表格为轮播状态，首行回调即当轮播表格轮播数据时将对第一行数据添加回调。

表格行数

默认为5行数据，在此可自由增加或删减数据行数。

行间距

设置轮播表格各行间的行间距。

边框

此项可更改轮播表格内表格边框颜色。

水平滚动

当轮播表格横向距离较窄时，可以设置水平滚动来滚动显示数据。

选中行

当鼠标点击选中某一行数据时的颜色变化。

如下示例图所示，设置选中行为白色，粉色阴影，标记为黄色。

效果图如下所示：

动画

动画设置

列表数据实际条数多于展示数据时，可以启用组件动画进行行数据轮播。

当行数据少于展示数据时，启用动画也不对仅有数据做轮播。

动画模式：

组件预置两种动画模式：逐条、全部。

*动画类型配置项说明

动画类型-逐条动画配置项说明：

高亮

行数：

设置高亮显示数据的具体行。

背景：

背景分为纯色、渐变、自定义三种方式。

• 纯色为单色纯色颜色，可自定义颜色。
• 渐变为双颜色组合，可进一步针对颜色组合进行调整。
• 自定义即上传自定义图片为背景。

样式：

高亮显示的行的数据样式。可调整字号、文字颜色和字体。

动画类型-全部动画配置项说明：

选择

选择方式分为多选和多选，当设置为多选时可选择多行数据进行标记展示。

链接

配置行超链接页面跳转。

选择配置项禁用时链接配置失效。

*链接配置效果案例

*链接配置项

域名URL：

配置页面跳转地址，可填入EasyV搭建其他可视化应用分享链接实现页面跳转。

新开页面：

页面跳转时，是否打开新的标签页。

跳转参数：

页面跳转时可带表格行数据参数跳转，文本中填写轮播表格字段名，支持多参数。

带参数跳转时需在域名URL末处补充 # 符号(平台目前仅支持#传参)。

*域名URL添加#说明

*文本内容填写说明

3、表格

表头

如下示例图所示，表头内是配置轮播表格内表头的配置项。分为表头行高、对齐方式、背景和文本样式四项。

*表头配置项

表头行高

即设置表头行高值。

对齐方式

表头内数据对齐方式，分为左对齐、右对齐和居中对齐三种方式。

背景

表头背景当前有纯色、渐变和自定义三种背景方式。

纯色

设置单一纯色。

渐变

在渐变中可以配置两种渐变颜色。

颜色后面的数值，可以针对颜色占据的空间进一步

自定义

上传一张自定义图片。

文本样式

配置序号列中文本的样式

行配置

通过添加行系列各行也支持各行单独配置样式，行系列数少于行数据数时重复行样式。

*行配置配置项

*行配置配置项说明

序列号

配置序列号样式。

*序列号配置项

标题

配置序列号该列的列名。

起始值

配置起始序号的值。

样式

对齐方式

配置序号列（含表头）的对齐方式

列宽

配置序号列（含表头）的宽度

列间距

配置序号列（含表头）左侧的边距

文本样式

配置序号列中文本的样式

阴影

配置序号列的阴影

样式指定

可指定某序号列配置具体样式。

*样式指定配置项

4、列设置

字段名

配置对应列填入内容。

*列字段名配置说明

显示名

配置该列在表头的显示名称。

置顶

配置该列行数据为设定值时则对应行置顶显示。

当动画禁用时，仅颜色配置生效，对应行不置顶。

*置顶配置项

*置顶配置项说明

对齐方式

分为左对齐、居中对齐和右对齐三种设置。

偏移

可设置上偏移和下偏移量。

换行锁定

主要针对当文字溢出设置为换行时，开启换行锁定文字不换行。

列宽

对应列的列宽度，每一列都可以单独设置宽度。

列间距

与前一列的列间距，每一列都可以单独设置列间距。

边框

针对每个不同列进行设置，可设置每一列数据边框的宽度、颜色和圆角。

内容类型

轮播表格内容支持文本、数字、进度条、图片、状态图片，默认为文本。以下分别对不同状态进行介绍。

1. 文字

a.文字溢出

组件预置当数据长度较长无法显示完全时三种显示状态，省略号、换行、跑马灯。

当设置为跑马灯时可以设置文字滚动时间，时间越短速度越快。

b. 文本样式

c. 阴影

在此可以设置组件内所有数据的阴影值。

d. 副标题

支持添加配置副标题。可针对副标题设置字段名、大小和颜色。

*副标题配置项

f. 后缀

支持添加列数据后缀，配置后缀文本内容以及文本样式。

2. 数字：

内容类型为数字时，可配置是否在数据的千分位分割、是否显示负号。

*数字类型相关配置项

3. 进度条：

*进度条类型相关配置项｜对应数据类型

a. 进度条类型：

组件内置支持心形、方块、条形三种进度条类型。

数据源对应列数据为数字时进度条类型才生效。

b. 颜色：

配置进度条颜色样式。

4. 图片：

*图片类型相关配置项｜对应数据类型

数据源对应列数据为图片URL资源。

遮罩：

可上传图片遮罩调整图片形状。

*遮罩配置使用案例

5. 状态图片：

*遮罩配置使用案例

悬浮标题

当开启悬浮标题后，鼠标移动到数据后会悬浮显示数据。

5、条目高亮

条目高亮可以对某一行数据进行高亮显示，如下示例图所示第三行红色高亮显示。

二、数据

组件数据格式

JSON数据案例

[
	{
		"column1": "第一列内容-1",
		"column2": 20,
		"column3": "××××",
		"isSelected": false
	},
	{
		"column1": "第一列内容-2",
		"column2": 40,
		"column3": "××××",
		"isSelected": false
	},
	{
		"column1": "第一列内容-3",
		"column2": 60,
		"column3": "××××",
		"isSelected": false
	},
	{
		"column1": "第一列内容-4",
		"column2": 80,
		"column3": "××××",
		"isSelected": false
	},
	{
		"column1": "第一列内容-5",
		"column2": 90,
		"column3": "××××",
		"isSelected": false
	},
	{
		"column1": "第一列内容-6",
		"column2": 95,
		"column3": "××××",
		"isSelected": false
	},
	{
		"column1": "第一列内容-7",
		"column2": 98,
		"column3": "××××",
		"isSelected": false
	},
	{
		"column1": "第一列内容-8",
		"column2": 100,
		"column3": "××××",
		"isSelected": false
	}
]

数据配置项说明

数据对接详情

数据对接详情请见以下文档👇

项目交付——数据对接入门

三、交互

载入动画

所有组件均提供移入、移入(小)、划变三种组件载入动画。

载入动画选择无时，则组件没有载入动画。

载入动画仅在可视化应用预览、发布组件加载时显示。

载入动画配置项：

回调参数

回调参数即为全局性的参数变量，用于控制组件之间参数的传递，可通过设置回调参数来实现数据驱动交互。

其中，字段值即参数变量，变量名即对字段值的重命名。

详细的回调参数教学👉 回调的使用

自定义事件

自定义事件为「交互事件」的增强模块，支持通过数据驱动组件状态、或变更组件样式配置，也可自定义编辑复杂的条件逻辑；
详细的自定义事件教学👉自定义事件教学

实操教程

链接点击链接查看和创建实操教程：地图数据跳转

链接点击链接查看和创建实操教程：点击触发url弹窗

教学视频--URL弹窗

欢迎您在评论区留下您对该组件的意见，管理员会及时回复您，如长时间未回复欢迎您搜索钉钉群：33782396或者扫描以下二维码添加微信群 @谨禧 说出您的想法，采纳后将送出定制礼品。

也可以通过问卷来向我们反馈需求：https://jinshuju.net/f/XyCXU0