Table View 表格展现

1.2.0 及以上版本才有此功能

通过表格的方式来展现数据，和 table 的不同之处：

  • 数据源要求不同
    • table 的数据源需要是多行的数据，最典型的就是来自某个数据库的表
    • table view 的数据源可以来自各种固定的数据，比如单元格的某一列是来自某个变量
  • 功能不同
    • table 只能用来做数据表的展现
    • table view 除了展现复杂的报表，还能用来进行布局
  • 合并单元格方式不同
    • table 的合并单元格需要依赖数据
    • table view 的合并单元格是手动指定的，因此可以支持不规则的数据格式

基本用法

```schema: scope=”body” { “type”: “service”, “data”: { “beijing”: “20”, “tianjing”: “19” }, “body”: [ { “type”: “table-view”, “trs”: [ { “background”: “#F7F7F7”, “tds”: [ { “body”: { “type”: “tpl”, “tpl”: “地区” } }, { “body”: { “type”: “tpl”, “tpl”: “城市” } }, { “body”: { “type”: “tpl”, “tpl”: “销量” } } ] }, { “tds”: [ { “rowspan”: 2, “body”: { “type”: “tpl”, “tpl”: “华北” } }, { “body”: { “type”: “tpl”, “tpl”: “北京” } }, { “body”: { “type”: “tpl”, “tpl”: “${beijing}” } } ] }, { “tds”: [ { “body”: { “type”: “tpl”, “tpl”: “天津” } }, { “body”: { “type”: “tpl”, “tpl”: “${tianjing}” } } ] } ] } ] }

  2. 可以看到 table view 需要手动进行单元格合并，因此更适合使用可视化编辑器进行编辑。
  4. ## 设置项
  6. table view 的设置项有三层，可以分别对表格级别、行级别、单元格级别进行设置。
  8. ### 表格设置项
  10. | 属性名      | 类型            | 默认值                                                | 说明             |
  11. | ----------- | --------------- | ----------------------------------------------------- | ---------------- |
  12. | width       | `number/string` | '100%'                                                |                  |
  13. | padding     | `number/string` | 'var(--TableCell-paddingY) var(--TableCell-paddingX)' | 单元格默认内间距 |
  14. | border      | `boolean`       | true                                                  | 是否显示边框     |
  15. | borderColor | `string`        | `var(--borderColor)`                                  | 边框颜色         |
  16. | trs         |                 |                                                       | 参考下面的行设置 |
  18. ### 行设置
  20. | 属性名     | 类型            | 默认值 | 说明                 |
  21. | ---------- | --------------- | ------ | -------------------- |
  22. | height     | `number/string` |        |                      |
  23. | background | `string`        |        | 行背景色             |
  24. | tds        |                 |        | 参考下面的单元格设置 |
  26. ### 单元格设置
  28. | 属性名     | 类型                                      | 默认值         | 说明                                                             |
  29. | ---------- | ----------------------------------------- | -------------- | ---------------------------------------------------------------- |
  30. | background | `string`                                  |                | 单元格背景色                                                     |
  31. | color      | `string`                                  |                | 单元格文字颜色                                                   |
  32. | bold       | `boolean`                                 | false          | 单元格文字是否加粗                                               |
  33. | width      | `number/string`                           |                | 单元格宽度，只需要设置第一行                                     |
  34. | padding    | `number/string`                           | 集成表格的设置 | 单元格内间距                                                     |
  35. | align      | `string`                                  | `left`         | 单元格内的水平对齐，可以是 `left`、`center`、`right`             |
  36. | valign     | `string`                                  | `middle`       | 单元格内的垂直对齐，可以是 `top`、`middle`、`bottom`、`baseline` |
  37. | colspan    | `number`                                  |                | 单元格水平跨几行                                                 |
  38. | rowspan    | `number`                                  |                | 单元格垂直跨几列                                                 |
  39. | body       | [SchemaNode](../../docs/types/schemanode) |                | 其它 amis 设置                                                   |
  41. ### 列设置项
  43. 列设置项主要是用于控制整列的样式，比如
  45. ```schema: scope="body"
  46. {
  47.   "type": "table-view",
  48.   "cols": [
  49.     {
  51.     },
  52.     {
  53.       "style": {
  54.         "background": "#F7F7F7"
  55.       }
  56.     }
  57.   ],
  58.   "trs": [
  59.     {
  60.       "tds": [
  61.         {
  62.           "rowspan": 2,
  63.           "body": {
  64.             "type": "tpl",
  65.             "tpl": "华北"
  66.           }
  67.         },
  68.         {
  69.           "body": {
  70.             "type": "tpl",
  71.             "tpl": "北京"
  72.           }
  73.         }
  74.       ]
  75.     },
  76.     {
  77.       "tds": [
  78.         {
  79.           "body": {
  80.             "type": "tpl",
  81.             "tpl": "天津"
  82.           }
  83.         }
  84.       ]
  85.     }
  86.   ]
  87. }
属性名 类型 默认值 说明
span number 这是个跨几列的设置项
style object 列样式

标题设置

可以通过 caption 来添加段标题文本，并通过 captionSide 来控制显示在底部还是顶部。

```schema: scope=”body” { “type”: “table-view”, “caption”: “标题”, “captionSide”: “bottom”, “trs”: [ { “tds”: [ { “rowspan”: 2, “body”: { “type”: “tpl”, “tpl”: “华北” } }, { “body”: { “type”: “tpl”, “tpl”: “北京” } }, { “body”: { “type”: “tpl”, “tpl”: “${beijing}” } } ] }, { “tds”: [ { “body”: { “type”: “tpl”, “tpl”: “天津” } }, { “body”: { “type”: “tpl”, “tpl”: “${tianjing}” } } ] } ] }

  2. ## 作为布局方法
  4. table-view 除了可以用来展现表格类型的数据，还能用来实现复杂布局效果，只需要将 `border` 隐藏就行，除了拆分单元格还能通过嵌套的方式实现布局，比如：
  6. ```schema: scope="body"
  7. {
  8.   "type": "table-view",
  9.   "border": false,
  10.   "trs": [
  11.     {
  12.       "background": "#feceea",
  13.       "tds": [
  14.         {
  15.           "colspan": 2,
  16.           "align": "center",
  17.           "body": {
  18.             "type": "tpl",
  19.             "tpl": "头部"
  20.           }
  21.         }
  22.       ]
  23.     },
  24.     {
  25.       "tds": [
  26.         {
  27.           "rowspan": 2,
  28.           "background": "#fef1d2",
  29.           "width": 200,
  30.           "body": {
  31.             "type": "tpl",
  32.             "tpl": "侧边"
  33.           }
  34.         },
  35.         {
  36.           "align": "center",
  37.           "background": "#a9fdd8",
  38.           "body": {
  39.             "type": "tpl",
  40.             "tpl": "右上"
  41.           }
  42.         }
  43.       ]
  44.     },
  45.     {
  46.       "height": 200,
  47.       "tds": [
  48.         {
  49.           "align": "center",
  50.           "background": "#d7f8ff",
  51.           "body": {
  52.             "type": "table-view",
  53.             "border": false,
  54.             "trs": [
  55.               {
  56.                 "tds": [
  57.                   {
  58.                     "align": "center",
  59.                     "body": {
  60.                       "type": "tpl",
  61.                       "tpl": "栏目 1"
  62.                     }
  63.                   },
  64.                   {
  65.                     "align": "center",
  66.                     "body": {
  67.                       "type": "tpl",
  68.                       "tpl": "栏目 2"
  69.                     }
  70.                   },
  71.                   {
  72.                     "align": "center",
  73.                     "body": {
  74.                       "type": "tpl",
  75.                       "tpl": "栏目 3"
  76.                     }
  77.                   }
  78.                 ]
  79.               }
  80.             ]
  81.           }
  82.         }
  83.       ]
  84.     },
  85.     {
  86.       "tds": [
  87.         {
  88.           "colspan": 2,
  89.           "align": "center",
  90.           "background": "#cec5fa",
  91.           "body": {
  92.             "type": "tpl",
  93.             "tpl": "底部"
  94.           }
  95.         }
  96.       ]
  97.     }
  98.   ]
  99. }