# 轮播列表

# 属性配置

# 基础

组件标题： 用于在图层中显示组件的名称。
组件尺寸： 组件的宽度和高度，单位为px。
组件位置： 组件在大屏中的位置，通过横纵坐标来定义，单位为px。
旋转角度： 组件在图层中的旋转角度。
透明度: 组件的透明度。
基础样式
- 边框： 默认边框不开启，点击选中边框选择器，可设置单个边框得显隐、颜色、宽度和类型。
- 圆角： 设置边框圆角，可分别设置四个方向得圆角大小。
- 背景： 背景设置得是组件区域内整体的框选背景样式，不单是组件自身的背景样式。可单独设置颜色，也可设设置渐变色，当渐变比例增加到两个以上时，渐变颜色覆盖背景设置的基础颜色。背景可设置背景图片，来源可为素材库或者图片地址，可设置背景图大小及位置。
- 区域阴影： 设置组件区域阴影颜色、位置、模糊、尺寸以及显示在区域内部或外部。
背景色： 设置列表组件背景色。
列表主题： 有暗色和亮色两种主题，切换主题时会改变列表内已经设置的背景及文字样式，可用于重置列表样式。
边框线
- 显示边框： 切换列表是否显示边框。
- 边框设置： 列表边框包括外边框、内横边框、内纵边框三部分设置，设置属性相同，包括：
  - 颜色： 设置边框颜色
  - 宽度： 设置边框宽度
  - 类型： 设置边框类型
缺省状态设置： 缺省状态基础设置。
- 提示内容： 缺省状态提示内容。
- 背景色： 缺省状态背景色。
- 文本设置： 同文本设置。
- 文字阴影： 设置文字阴影样式。

# 行设置

行设置包括 表头行设置、内容行设置、合计行设置 三个部分

# 表头行设置

显示表头： 是否显示表头，默认显示。
行高： 设置表头行高。
背景色： 表头背景色。
内边距： 设置单元格内填充，设置按照 padding 属性的上、右、下、左的顺序设置。
水平对齐： 设置单元格内水平对齐。
垂直对齐： 设置单元格内垂直对齐。
文本设置： 同文本设置。

# 内容行设置

列表内容行设置可添加多个状态，可适应多种行样式配置，当前状态的设置作用区域通过 作用行 配置。例如状态 1 配置奇行样式，状态 2 配置偶行样式，还有其他形式的行样式配置，详细见 作用行。
如果状态的作用行重复时，后面的状态会覆盖前面的状态样式，例如添加了两个奇行状态，会显示后面状态的样式设置。

行高： 设置列表行高。
内置状态： 内置状态包括默认、主要、成功、警告、危险五种状态，可设置作用行状态。
作用行： 作用行设置当前状态的样式设置作用区域，内部提供全部、奇数、偶数、指定、TOP 行、自定义 六种设置形态。
- 全部： 作用列表全部行。
- 奇数： 作用列表奇数行，作用行下标从 1 开始。
- 偶数： 作用列表偶数行，作用行下标从 1 开始。
- 指定： 可指定列表的某一行或者多行，作用行下标从 0 开始，多行时下标集合通过 “,” 隔开（英文逗号）。
- TOP 行： 可指定列表前几行为作用行，作用行下标从 1 开始。
- 自定义： 通过字符串模板数据匹配设置作用行，里面有 data 和 index 两个参数，匹配符包括 >、<、>=、<=、=== 等。
  
  例 1：return data[key] > value(匹配值), data 为返回的当前行的数据, key 数据中拖过的字段。
  
  例 2：return index < 3, 表示作用前 3 行, index 列表数据下标, 下标从 0 开始。
内边距： 设置单元格内填充，设置按照 padding 属性的上、右、下、左的顺序设置。
水平对齐： 设置单元格内水平对齐。
样式设置： 包含 基础样式、悬停样式，面板配置属性相同。
- 背景色： 作用行背景色。
- 文本设置： 同文本设置。

行设置

# 合计行设置

第一列不做合计，显示合计文字，内容可通过配置修改。
合计行提供几种合计方法，例如求和、平均值等，详细见 合计类型。
合计行默认只对列属性是数据、合计形态 (见列设置 -> 展示形态设置) 的 Number 类型做合计。

显示合计行： 是否显示合计行，默认不显示。
名称： 第一列展示的名称，默认是合计。
行高： 设置列表合计行行高。
合并类型： 设置合计的类型，内置暂提供合计、平均值、最小值、最大值 四种。
单位： 当前列有合计值时，后面拼接的单位。
非合计填充： 当前列不是合计列时，默认给的缺省提示。
背景色： 合计行背景色。
内边距： 设置单元格内填充，设置按照 padding 属性的上、右、下、左的顺序设置。
水平对齐： 设置单元格内水平对齐。
垂直对齐： 设置单元格内垂直对齐。
文本设置： 同文本设置。

# 列设置

列设置可增减，绑定数据返回字段展示数据值;
可设置当前列展示形态，包括序号列、进度条、合计列等;
可单独配置当前列排序、筛选、固定列、内容填充等;

名称： 当前列展示名称, 作用在列表当前列表头。
字段名： 下拉选择框，选中当前列展示字段内容。也可清空，多用作设置其他展示形态，例如当前列为序号列。
隐藏： 设置当前列为隐藏列，隐藏列的内容不在合计行、合计列中参与合计，在展开行中体现。
宽度： 设置当前列宽度，宽为 0 或者空时，当前列适配整个列表。设置不为 0 数值时，宽度为设置宽度，单位是 px，总宽度超出列表时，出现横向滚动条。
溢出文本： 文本超出时提供折行、省略、轮播三种展示形态。
点击事件： 绑定的是列点击事件，作为列点击事件的触发点，可以实现改变相同的字段，触发不同的事件。在启用列点击事件时，当前设置为必选项，设置触发事件。
所属分组： 有列分组时，可通过这个属性给列分属不同的组。选中的下拉是父子结构，可明确体现当前列所属分组，可用于实现多表头结构列表。
固定位置： 选择当前列是固定在一边。当设置了所属分组后，固定位置不可设置。

固定位置

排序： 排序开启时，会在当前列表头显示排序控件。当前列未设置字段名或者清空字段名时，排序不可开启。
展示形态设置： 可设置当前列的展示形式，现有内置数据、序号列、进度条、合计四种形式。
- 数据： 展示当前绑定字段数据，需要选择字段名。
- 序号列： 添加列表序号列。
- 进度条： 当前列数据以进度条形式展示，需要绑定的字段返回的值是不带%的百分比值，范围是 0 ~ 100 , 超出的显示 100。
  - 宽度： 设置进度条的粗细。
  - 文字内置： 进度提展示的文字是在进度上，关闭时文字展示在进度条外。
  - 当前状态： 内置进度条状态有默认、成功、警告、异常、自定义 五种。当状态时自定义时，可自行设置进度条某个进度时展示的颜色。例：
  上图中自定义颜色表示： 0-30 进度条为红色， 30-60 进度条为绿色， 60-100 进度条为蓝色。
- 合计： 添加当前列为合计列。
  1. 数据中隐藏列(见列设置 -> 隐藏例)不做合计。
  2. 数据列中设置填充替换(见列设置 -> 内容设置 -> 填充)不做合计。
  3. 合计只对列属性是数据形态 (见列设置 -> 展示形态设置) 并绑定字段的 Number 类型做合计。
  - 合并类型： 设置合计的类型，内置暂提供合计、平均值、最小值、最大值 四种。
表头设置： 表头设置包括 基础样式、填充两部分。
- 基础样式
  - 开启： 列设置基础样式默认不开启，关闭时列表显示行样式设置，开启时列当前设置样式生效，用于当前列需要设置特殊样式时。
  - 背景色： 当前列表头背景色。
  - 内边距： 设置单元格内填充，设置按照 padding 属性的上、右、下、左的顺序设置。
  - 水平对齐： 设置单元格内水平对齐。
  - 垂直对齐： 设置单元格内垂直对齐。
  - 文本设置： 同文本设置。
- 填充： 填充中可添加多个标记，每个标记是一个独立。例如可在内容前面添加图标，内容后面添加单位
  - 显示： 开启标记时，标记内容在列表中显示。
  - 位置： 位置设置分左右，是以当前列展示的内容做参照物，在当前数据的左右添加标记。
  - 填充类型： 表头可填充图标、图片两种。
  - 图标类名： 图标来自 Element-UI 的图标库 (opens new window)，例如：el-icon-user。
  - 图片类型： 当填充类型为图片时可设置图片类型，包括 图片选择、图片地址 两种。
  - 图片选择： 图片来源是素材库，点击可打开素材库进行图片选择。
  - 图片地址： 添加可访问的第三方图片地址。
  - 宽度： 填充类型为图片时，可设置图片宽度。
  - 高度： 填充类型为图片时，可设置图片高度。
  - 左间距： 标记左填充。
  - 右间距： 标记右填充。
内容设置： 表头设置包括 基础样式、悬停样式、填充两部分。
- 内填充： 基础样式和悬停样式的内填充
- 基础样式
  - 开启： 列设置基础样式默认不开启，关闭时列表显示行样式设置，开启时列当前设置样式生效，用于当前列需要设置特殊样式时。
  - 背景色： 当前列内容背景色。
  - 水平对齐： 设置单元格内水平对齐。
  - 文本设置： 同文本设置。
- 悬停样式： 同基础样式
- 填充： 基础功能同表头设置填充，区别如下
  - 替换文本： 开启替换文本时，当前标记会替换表格原有内容。例如后台返回性别字段用 0，1 来区分男女，可将字段返回的 '0' 替换成 '男'，替换匹配通过作用区域设置。
  - 位置： 位置设置分左右，是以当前列展示的内容做参照物，在当前数据的左右添加标记。
  - 填充类型： 内容可填充图标、图片、文本三种。
  - 文本内容： 当填充类型是文本时，可设置文本内容。文本内容可设置 HTML 标签，可在标签上添加样式实现特殊样式设置。
  - 作用区域：
    1. 默认作用区域为空，为空时表示作用整个列。
    2. 通过字符串模板数据匹配设置作用行，里面有 data 和 index 两个参数，匹配符包括 >、<、>=、<=、=== 等。
      
      例 1：return data[key] > value(匹配值), data 为返回的当前行的数据, key 数据中拖过的字段。
      
      例 2：return index < 3, 表示作用前 3 行, index 列表数据下标, 下标从 0 开始。

# 列分组

列分组可设置列表的多级表头，可以增减分组。
列分组通过 上级分组 组成父子结构。

名称： 当前分组名称，显示在表头，当不为空时可作为所属分组(列设置 -> 所属分组)的备选项。
上级分组： 上级分组的内容来自当前添加的分组。

所属分组为空时，当前分组作为一级分组备选。
分组不可逆向选择，当前分组选择时，被选中的分组不可在选择下级作为上级分组。

行高： 设置列表分组行高。
背景色： 分组背景色。
内边距： 设置单元格内填充，设置按照 padding 属性的上、右、下、左的顺序设置。
水平对齐： 设置单元格内水平对齐。
垂直对齐： 设置单元格内垂直对齐。
文本设置： 同文本设置。

# 动画

开启轮播： 是否开启列表轮播。
悬停停止： 鼠标划过列表的时候是否停止。
动画模式： 设置列表的动画时逐条翻页还是逐页翻。
轮播间隔： 设置翻页的时间。

# 公共属性配置

文本设置
1. 文字大小;
2. 文字颜色;
3. 文字类型;
4. 文字加粗、倾斜、下划线;
5. 文字间距;
6. 文字行高;
7. 文字阴影颜色，设置阴影颜色为空时，不显示文字阴影;
8. 文字阴影横向偏移、纵向偏移、模糊程度;

# 数据

# 静态数据

分页列表数据格式如下：

[
  {
    "date": "2020-04-01",
    "name": "王小虎",
    "province": "上海",
    "city": "普陀区",
    "address": "上海市普陀区金沙江路 1518 弄",
    "zip": 200333
  },
  {
    "date": "2020-04-02",
    "name": "王小虎",
    "province": "上海",
    "city": "普陀区",
    "address": "上海市普陀区金沙江路 1518 弄",
    "zip": 200333
  }
  ...
]

# 数据资源

# 交互

行点击事件，与数据相应配置与组件交互(设计器 -> 组件管理 -> 组件交互)配置相同，在此不做赘述

# 列点击事件

列点击事件为满足改变相同字段，触发不同事件的需求，提供列点击事件和添加配置。
配置列表列点击事件时，必须配置触发点，否则不生效，触发配置在 列设置 -> 触发事件

# 树型展开事件

开启树型展开事件，配置字段和变量，在图标的下拉时触发改事件，将字段值推送变量池

# 节点编程

# 事件

行点击事件： 点击行时触发事件。3.0+
- 抛出的参数： 该行所携带的数据。
列点击事件： 点击列时触发事件。3.0+
- 抛出的参数： 该列所携带的数据。
列排序： 列排序时触发事件。3.0+
- 抛出的参数： 排序的字段和排序的类型。
```
[
  {
    order: "ASC"  //排序类型
    sort: "WIDTH" // 排序列
  }
]
```

← 树型列表文本框 →