高级表格

高级表格将数据以列表或滚动的样式进行展示，支持多种展示模式，包括单行、多行、带表头等

一、效果展示

1. 滚动列表(单行)

2. 滚动列表(多行+序号)

3. 滚动列表(带表头)

二、添加组件

三、列表样式配置

1. 滚动配置

设置每行数量、是否显示表头，滚动时长等

2. 容器配置

当容器有背景时，可设置背景的圆角、左右边距

3. 行配置

配置列表行的样式，背景、高度、边距等

4. 字段映射

将数据中的字段添加至列表中，配置每个字段的显示名称、映射关系和样式设置。

4.1 字段映射管理

• 显示序号：控制是否在列表中显示序号列，通过开关控制显示/隐藏
• 新增：点击"+新增"按钮可添加新的字段映射项
• 字段列表：显示已配置的字段映射项，包含以下信息：
  • 选中：通过单选按钮选择当前要配置的字段
  • 列名称：显示字段在列表中的显示名称，例如："项目名称"、"办公费"、"差旅费"等
  • 列映射：显示字段对应的数据源字段名，例如："projectName"、"officeFee"、"travelFee"等
  • 操作：
    • 编辑：点击编辑图标可修改字段映射配置
    • 删除：点击删除图标可删除该字段映射项

4.2 字段样式配置

选中某个字段后，可在下方配置该字段的详细样式设置。

• 字段名称：显示当前正在配置的字段名称，例如："字段: 项目名称"
• 文本对齐：设置字段内容的文本对齐方式
  • 可选：左对齐、居中、右对齐
• 宽度：设置字段列的宽度，支持通过滑块或输入框调整（单位：px）
  • 例如：116px
• 其他样式设置
• 组合样式：开启组合显示时，可设置数据的前缀、数值样式和后缀及样式

提示：字段映射中的"列映射"字段名需要与数据格式中返回的字段名保持一致，才能正确显示数据。例如，数据中有 projectName 字段，则列映射应设置为 projectName。

四、数据格式

1. 滚动列表(单行)

[
  {
    "id": 1,
    "projectName": "项目A",
    "officeFee": 1200,
    "travelFee": 5600,
    "arrearsAmount": 3000
  },
  {
    "id": 2,
    "projectName": "项目B",
    "officeFee": 800,
    "travelFee": 4200,
    "arrearsAmount": 0
  },
  {
    "id": 3,
    "projectName": "项目C",
    "officeFee": 1500,
    "travelFee": 1800,
    "arrearsAmount": 1200
  },
  {
    "id": 4,
    "projectName": "项目D",
    "officeFee": 600,
    "travelFee": 2300,
    "arrearsAmount": 900
  },
  {
    "id": 5,
    "projectName": "项目E",
    "officeFee": 950,
    "travelFee": 3000,
    "arrearsAmount": 150
  }
]

2. 滚动列表(多行+序号)、滚动列表(带表头)

[
  {
    "id": 1,
    "plateNumber": "粤B12345",
    "violationCount": 3,
    "brand": "丰田"
  },
  {
    "id": 2,
    "plateNumber": "粤A67890",
    "violationCount": 1,
    "brand": "本田"
  },
  {
    "id": 3,
    "plateNumber": "粤C54321",
    "violationCount": 2,
    "brand": "大众"
  },
  {
    "id": 4,
    "plateNumber": "粤D98765",
    "violationCount": 0,
    "brand": "比亚迪"
  },
  {
    "id": 5,
    "plateNumber": "粤E11223",
    "violationCount": 5,
    "brand": "特斯拉"
  },
  {
    "id": 6,
    "plateNumber": "粤F33445",
    "violationCount": 4,
    "brand": "福特"
  },
  {
    "id": 7,
    "plateNumber": "粤G55667",
    "violationCount": 2,
    "brand": "雪佛兰"
  },
  {
    "id": 8,
    "plateNumber": "粤H77889",
    "violationCount": 6,
    "brand": "宝马"
  },
  {
    "id": 9,
    "plateNumber": "粤J99001",
    "violationCount": 1,
    "brand": "奔驰"
  },
  {
    "id": 10,
    "plateNumber": "粤K11223",
    "violationCount": 0,
    "brand": "奥迪"
  },
  {
    "id": 11,
    "plateNumber": "粤L44556",
    "violationCount": 3,
    "brand": "起亚"
  },
  {
    "id": 12,
    "plateNumber": "粤M77889",
    "violationCount": 2,
    "brand": "现代"
  },
  {
    "id": 13,
    "plateNumber": "粤N99002",
    "violationCount": 5,
    "brand": "路虎"
  },
  {
    "id": 14,
    "plateNumber": "粤P22334",
    "violationCount": 1,
    "brand": "沃尔沃"
  },
  {
    "id": 15,
    "plateNumber": "粤Q55667",
    "violationCount": 4,
    "brand": "马自达"
  },
  {
    "id": 16,
    "plateNumber": "粤R00000",
    "violationCount": 0,
    "brand": "丰田"
  }
]