进度条表格

配置项

描述

图示

全局配置

表格配置

定义进度条表格的轮播效果、表格内容及表头样式、悬浮样式，以及序号列样式。

• 轮播：开启后，进度条表格才会以动画样式进行轮播，可设置轮播间隔时间、轮播模式等。支持设置全屏滚动和逐条滚动模式，全屏滚动是以当前页面为单位进行轮播，类似翻页效果。

• 每页行数：进度条表格每页显示的行数。

• 表格内容样式：支持设置进度条表格的文本、背景、边框、单元格内边距等样式。主要说明如下：

  • 文本样式：设置文本的字体、颜色、字号大小、粗细等。

  • 基础样式：设置表格整体的背景颜色、行高、内容的对齐方式，以及是否开启斑马线。开启斑马线后，奇数行背景色与表格背景色相同，偶数行的背景色可按需设置。

    说明

    此处的对齐方式为进度条表格全局文本的对齐方式，如需单独设置某列的对齐方式，可在表格列配置项中设置。

    

  • 空数据样式：当表格内存在空数据时，此处可自定义空数据的显示样式。默认显示样式为蓝色背景，文案为暂无数据。

  • 溢出文本：定义溢出文本是否滚动显示，支持自定义滚动速率或滚动时长。若不开启滚动，则溢出文本将被截断，无法显示。

• 表头：开启后，将为进度条表格添加表头，可设置表头的内容对齐方式、文本样式、排序选中样式、边框样式、背景颜色、行高等。关闭后，表格将没有表头。

  说明

  排序选中样式指在预览和发布进度条表格组件时，单击表头某列的排序按钮时显示的颜色。 仅当表格列配置中，相应列开启排序功能，当前参数才会生效。

• 悬浮高亮：设置在预览或发布状态下，鼠标悬浮至进度条表格的指定行，相应行的文本内容是否高亮呈现。可设置如下高亮样式：

  • 文本的字体、粗细、大小、颜色等样式。

  • 行背景颜色、阴影偏移程度及阴影颜色。

• 序号列：开启后，将在进度条表格的最左侧生成一个序号列，可按需进行如下配置。

  • 通用配置：支持配置列名称、列宽、该列的文本字体、颜色、字号、背景等样式。

  • 特色项：如您需设置序号列的前N行呈现特殊内容（例如，图片），可开启该配置。

    • 自定义字段：此处的配置内容需要与数据源中对应的图片字段一致，该参数才会生效。例如，数据源中配置imgSrc: 'https://xxxx.png'，此处配置为imgSrc。

    • 自定义图片：使用自定义图片，请按需上传对应行所需的图片链接。如要获取动态图片，需在数据源中配置图片相关字段。

    说明

    • 数据源中的自定义图片字段内容，优先级高于此处配置的图片内容。

    • 单击或图标，添加或删除一个图片数据。 单击或图标配置多个图片数据的排列样式。单击图标，可复制当前选中的图片数据。

翻页器配置

翻页器，通常位于进度条表格下方，用于进行手动翻页，此处可设置翻页器的大小、显示页数、文字内容、边距等样式。

• 翻页器显隐设置：

  • 翻页器隐藏：开启后，将隐藏翻页器。

  • 单页隐藏：开启后，若进度条表格只有一页内容，则翻页器将隐藏。

• 通用设置：设置翻页器的大小、位置及显示样式。

• 页码样式设置：

  • 页码数量：定义当页数较多时，翻页器显示的页码数量。中间页数将使用省略号...代替。

  • 输入框：开启后，当页码较多时，可通过输入指定页数快速跳转至该页。

  • 页码样式：定义不同状态下的页码文字及背景颜色。

  • 自定义文字：定义翻页器上一页、下一页的显示文本。

表格列配置

定义进度条表格的列内容及样式。该配置项为一个数组，可配置多个列（序号列除外），编辑器会遍历数据，使数据通过自定义列的配置循环渲染。此处列的先后顺序即为进度条表格中列的展示顺序，您可按需调整相应顺序。

• 列样式：支持定义列的字段名称、显示名称、列宽、是否可排序等样式。

  • 列字段名：需要来源于数据源中的字段名称。配置后，进度条表格中该列才会获取数据源相应字段的内容进行显示。

  • 列显示名：作为该列的表头内容显示。

  • 列宽：当值为0时，列宽将自适应。若内容宽度超出列宽的设置数值，为保证内容准确展示，可使用该宽度。

  • 排序：开启后，可对当前列的数据按升降序排列。当列数据为进度条时，不支持排序。

  • 文本样式：可设置文本的字体、大小、颜色等。

    说明

    当数据类型为图片时，不涉及配置该参数。

  • 对齐方式：可设置当前列内容的对齐方式。

• 数据类型：可指定列数据的类型及显示样式。不同类型涉及的配置项存在差异，具体请以实际界面为准。

  • 数值型：可设置数值的精度。

  • 类目型：用于表示有限数量的类别或分类。例如，城市（北京、上海等）。

  • 时间型：可选择多种格式，通常为YYYY/MM/DD HH:mm:ss。

  • 图片：可设置图片的宽度、高度及圆角样式。

  • 趋势图：用于直观查看某指标的趋势。可设置趋势图标、不同趋势的颜色、指标显示样式等。

    • 指标设置：设置基础值及数值后缀（例如，%）。基础值表示以此数值作为基础，来计算图表走势，默认为0。基础值建议优先使用数据中的初始值。

    • 千分位：千分位分隔符。分隔符最长为一位，超出一位时取第一位，不能将数字作为分隔符。

    • 显示：控制是否需要显示不合规的数据类型。开启后，即使数据不符合趋势图支持的数据类型，该数据也会显示在进度条表格中。

  • 进度图：可选择条形图或环形图展示，通常数据为Number类型。可设置数值的精度、后缀、颜色、字体等样式。

• 其他操作：单击或图标，可添加或删除一列；单击或图标，可更改自定义列配置区域的排列样式；单击图标，可复制当前选中列。

高级配置

定义进度条表格中是否增加选择列、操作列、超链接、虚拟滚动等。

• 选择列：开启后，将在进度条表格最左侧添加一列选择列，用户可按需勾选指定行，执行进一步操作。

  • 默认选中：可设置默认选中的行，多个行使用英文逗号,分隔。该配置项匹配的是数据源中的id字段，需输入id对应的value值进行触发。

    说明

    若数据源无id字段或id字段内容为空，该配置项则无效。

  • 相关样式：可配置按钮的尺寸、背景颜色，以及选中状态下对钩（√）的颜色及大小。

• 操作列：开启后，将在进度条表格最右侧添加一列操作列，用户可按需配置相应样式及操作类型（例如，编辑、删除）。

  • 列样式：可设置列显示名称、列宽，以及常规状态及悬停状态下文本和按钮的大小、颜色等样式。

  • 列操作：可按需定义所要执行的操作类型，支持显示为按钮或文本。单击或图标，可添加或删除一项操作；单击或图标，可更改配置区域多个操作的排列样式；单击图标，可复制当前选中的操作项。

• 超链接配置：开启后，进度条表格数据源中配置的超链接才会生效。

  • 超链接字段名：此处配置的名称，需与数据源面板中设置的超链接字段一致（例如，link）。表格某行设置超链接后，单击该行的任意位置，即可跳转到相应链接。数据源中的代码示例如下。

    {
      "link": "https://www.aliyun.com/"
    }

  • 新窗口中打开：开启后，在预览或发布页单击相应超链接，将在浏览器新开一个窗口呈现跳转链接内容；若未开启，则在当前页面呈现链接内容。

• 虚拟滚动：开启后，可通过鼠标滚动查看进度条表格内容。可设置滚动的区域高度及边框样式。使用该功能时，请确保数据id值唯一。

  说明

  仅当轮播功能关闭时，可配置该参数。

条件配置

可通过条件控制，在进度条表格中选中符合条件的指定单元格或行，并以所配置的样式呈现。主要说明如下：

• 条件名称：配置所要执行的条件内容。例如，筛选出city字段等于杭州的单元格。更多条件样式配置详情，请参见条件树使用说明。

• 选定范围：定义当满足所配置的条件后，将选中指定单元格或选中整行。

  当选定范围配置为单元格时，若开启自定义显示列，将渲染自定义列所在的单元格。列显示名称需要来源于数据源中的字段。

  

• 数据类型：可选择进度图或趋势图。选择不同类型后，可按照界面指引配置相应类型的颜色、字体等样式。

• 其他操作：单击或图标，添加或删除一个条件样式。 单击或图标，可配置多个条件的排列样式。单击图标，可复制当前选中的条件样式。

配置项

描述

图示

交互事件

定义与其他组件间的交互行为，实现组件联动。单击图标，即可定义相关交互事件及交互动作。

关联全局变量

可在组件中关联全局参数，实现组件间的参数传递，进行组件交互。单击图标，即可开启相应指令，并为该指令关联所需全局变量。

• 当点击单行时：单击进度条表格某一行时抛出的临时变量，默认抛出数据中的id、value、sales、proportion和city字段。

  说明

  该字段为默认的示例字段，具体字段名称请以您的数据为准。

• 当点击分页时：单击进度条表格的分页按钮进行分页时，抛出的临时变量，默认抛出数据中自定义的current字段。

• 当点击排序时：单击进度条表格的排序按钮时，抛出的临时变量，默认抛出数据中自定义的columnName和order字段。

• 当点击多选时：当勾选进度条表格的多个行时，抛出的临时变量，默认抛出数据中自定义的id、value、sales、proportion和city字段。

• 当点击操作项时：单击进度条表格的操作列时，抛出的临时变量，默认抛出数据中自定义的operateType和dataItem字段。

配置详情请参见组件交互配置。