Table v2 表格

表格展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像Service这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过source属性，获取数据链中的数据，完成数据展示。

基本用法

```schema: scope=”body” { “type”: “service”, “api”: “/api/sample?perPage=5”, “body”: [ { “type”: “table-v2”, “title”: “表格标题”, “source”: “$rows”, “columns”: [ { “title”: “Engine”, “key”: “engine” }, { “title”: “Version”, “key”: “version” }, { “title”: “Browser”, “key”: “browser” }, { “title”: “Operation”, “key”: “operation”, “type”: “button”, “label”: “删除”, “size”: “sm” } ], “footer”: “表格Footer” } ] }

  2. ## 可选择
  4. 支持单选、多选
  6. ### 多选
  8. ```schema: scope="body"
  9. {
  10.     "type": "service",
  11.     "api": "/api/sample?perPage=5",
  12.     "body": [
  13.         {
  14.             "type": "table-v2",
  15.             "source": "$rows",
  16.             "rowSelection": {
  17.                 "type": "checkbox",
  18.                 "keyField": "id"
  19.             },
  20.             "columns": [
  21.                 {
  22.                     "title": "Engine",
  23.                     "key": "engine"
  24.                 },
  25.                 {
  26.                     "title": "Version",
  27.                     "key": "version"
  28.                 },
  29.                 {
  30.                     "title": "Browser",
  31.                     "key": "browser"
  32.                 },
  33.                 {
  34.                     "title": "Operation",
  35.                     "key": "operation",
  36.                     "type": "button",
  37.                     "label": "删除",
  38.                     "size": "sm"
  39.                 }
  40.             ]
  41.         }
  42.     ]
  43. }

点击整行选择

```schema: scope=”body” { “type”: “service”, “api”: “/api/sample?perPage=5”, “body”: [ { “type”: “table-v2”, “source”: “$rows”, “rowSelection”: { “type”: “checkbox”, “keyField”: “id”, “rowClick”: true }, “columns”: [ { “title”: “Engine”, “key”: “engine” }, { “title”: “Version”, “key”: “version” }, { “title”: “Browser”, “key”: “browser” }, { “title”: “Operation”, “key”: “operation”, “type”: “button”, “label”: “删除”, “size”: “sm” } ] } ] }

  2. ### 已选择
  4. ```schema: scope="body"
  5. {
  6.     "type": "service",
  7.     "api": "/api/sample?perPage=5",
  8.     "body": [
  9.         {
  10.             "type": "table-v2",
  11.             "source": "$rows",
  12.             "rowSelection": {
  13.                 "type": "checkbox",
  14.                 "keyField": "id",
  15.                 "selectedRowKeys": [1, 2]
  16.             },
  17.             "columns": [
  18.                 {
  19.                     "title": "ID",
  20.                     "key": "id"
  21.                 },
  22.                 {
  23.                     "title": "Engine",
  24.                     "key": "engine"
  25.                 },
  26.                 {
  27.                     "title": "Version",
  28.                     "key": "version"
  29.                 },
  30.                 {
  31.                     "title": "Browser",
  32.                     "key": "browser"
  33.                 },
  34.                 {
  35.                     "title": "Operation",
  36.                     "key": "operation",
  37.                     "type": "button",
  38.                     "label": "删除",
  39.                     "size": "sm"
  40.                 }
  41.             ]
  42.         }
  43.     ]
  44. }

已选择 - 正则表达式

```schema: scope=”body” { “type”: “service”, “api”: “/api/sample?perPage=5”, “body”: [ { “type”: “table-v2”, “source”: “$rows”, “rowSelection”: { “type”: “checkbox”, “keyField”: “id”, “selectedRowKeysExpr”: “data.record.id === 1” }, “columns”: [ { “title”: “ID”, “key”: “id” }, { “title”: “Engine”, “key”: “engine” }, { “title”: “Version”, “key”: “version” }, { “title”: “Browser”, “key”: “browser” }, { “title”: “Operation”, “key”: “operation”, “type”: “button”, “label”: “删除”, “size”: “sm” } ] } ] }

  2. ### 单选
  4. 可通过`disableOn`来控制哪一行不可选，不可选情况下会有禁用样式，但如果行内如果有除文字外的其他组件，禁用样式需要自行控制
  6. ```schema: scope="body"
  7. {
  8.     "type": "service",
  9.     "api": "/api/sample?perPage=5",
  10.     "body": [
  11.         {
  12.             "type": "table-v2",
  13.             "source": "$rows",
  14.             "rowSelection": {
  15.                 "type": "radio",
  16.                 "keyField": "id",
  17.                 "disableOn": "this.record.id === 1"
  18.             },
  19.             "columns": [
  20.                 {
  21.                     "title": "Engine",
  22.                     "key": "engine"
  23.                 },
  24.                 {
  25.                     "title": "Version",
  26.                     "key": "version"
  27.                 },
  28.                 {
  29.                     "title": "Browser",
  30.                     "key": "browser"
  31.                 }
  32.             ]
  33.         }
  34.     ]
  35. }

自定义选择菜单

内置全选all、反选invert、清空none、选中奇数行odd、选中偶数行even，存在禁止选择的行，不参与计算奇偶数

```schema: scope=”body” { “type”: “service”, “api”: “/api/sample?perPage=5”, “body”: [ { “type”: “table-v2”, “source”: “$rows”, “rowSelection”: { “type”: “checkbox”, “keyField”: “id”, “selections”: [ { “key”: “all”, “text”: “全选所有” }, { “key”: “invert”, “text”: “反选当页” }, { “key”: “none”, “text”: “清空所有” }, { “key”: “odd”, “text”: “选择奇数行” }, { “key”: “even”, “text”: “选择偶数行” } ] }, “columns”: [ { “title”: “Engine”, “key”: “engine” }, { “title”: “Version”, “key”: “version” }, { “title”: “Browser”, “key”: “browser” }, { “title”: “Operation”, “key”: “operation”, “type”: “button”, “label”: “删除”, “size”: “sm” } ] } ] }

  2. ## 筛选和排序
  4. ```schema: scope="body"
  5. {
  6.     "type": "service",
  7.     "api": "/api/sample?perPage=5",
  8.     "body": [
  9.         {
  10.             "type": "table-v2",
  11.             "source": "$rows",
  12.             "columns": [
  13.                 {
  14.                     "title": "Engine",
  15.                     "key": "engine",
  16.                     "sorter": true,
  17.                     "filterMultiple": true,
  18.                     "filters": [
  19.                         {
  20.                             "text": "Joe",
  21.                             "value": "Joe"
  22.                         },
  23.                         {
  24.                             "text": "Jim",
  25.                             "value": "Jim"
  26.                         }
  27.                     ]
  28.                 },
  29.                 {
  30.                     "title": "Version",
  31.                     "key": "version",
  32.                     "sorter": true,
  33.                     "width": 100
  34.                 },
  35.                 {
  36.                     "title": "Browser",
  37.                     "key": "browser",
  38.                     "filters": [
  39.                         {
  40.                             "text": "Joe",
  41.                             "value": "Joe"
  42.                         },
  43.                         {
  44.                             "text": "Jim",
  45.                             "value": "Jim"
  46.                         }
  47.                     ]
  48.                 }
  49.             ]
  50.         }
  51.     ]
  52. }

带边框

```schema: scope=”body” { “type”: “service”, “api”: “/api/sample?perPage=5”, “body”: [ { “type”: “table-v2”, “source”: “$rows”, “bordered”: true, “title”: “标题”, “footer”: “Footer”, “columns”: [ { “title”: “Engine”, “key”: “engine” }, { “title”: “Version”, “key”: “version” }, { “title”: “Browser”, “key”: “browser” }, { “title”: “Operation”, “key”: “operation”, “type”: “button”, “label”: “删除”, “size”: “sm” } ] } ] }

  2. ## 可展开
  4. ```schema: scope="body"
  5. {
  6.     "type": "service",
  7.     "api": "/api/sample?perPage=5",
  8.     "body": [
  9.         {
  10.             "type": "table-v2",
  11.             "source": "$rows",
  12.             "columns": [
  13.                 {
  14.                     "title": "Engine",
  15.                     "key": "engine"
  16.                 },
  17.                 {
  18.                     "title": "Version",
  19.                     "key": "version"
  20.                 },
  21.                 {
  22.                     "title": "Browser",
  23.                     "key": "browser"
  24.                 },
  25.                 {
  26.                     "title": "Operation",
  27.                     "key": "operation",
  28.                     "type": "button",
  29.                     "label": "删除",
  30.                     "size": "sm"
  31.                 }
  32.             ],
  33.             "expandable": {
  34.                 "expandableOn": "this.record.id === 1 || this.record.id === 3",
  35.                 "keyField": "id",
  36.                 "expandedRowClassNameExpr": "<%= data.rowIndex % 2 ? 'bg-success' : '' %>",
  37.                 "expandedRowKeys": ["3"],
  38.                 "type": "container",
  39.                 "body": [
  40.                     {
  41.                         "type": "tpl",
  42.                         "html": "<div class=\"test\">测试测试</div>"
  43.                     }
  44.                 ]
  45.             }
  46.         }
  47.     ]
  48. }

已展开 - 正则表达式

```schema: scope=”body” { “type”: “service”, “api”: “/api/sample?perPage=5”, “body”: [ { “type”: “table-v2”, “source”: “$rows”, “columns”: [ { “title”: “Engine”, “key”: “engine” }, { “title”: “Version”, “key”: “version” }, { “title”: “Browser”, “key”: “browser” }, { “title”: “Operation”, “key”: “operation”, “type”: “button”, “label”: “删除”, “size”: “sm” } ], “expandable”: { “expandableOn”: “this.record.id === 1 || this.record.id === 3”, “keyField”: “id”, “expandedRowClassNameExpr”: “<%= data.rowIndex % 2 ? ‘bg-success’ : ‘’ %>”, “expandedRowKeysExpr”: “data.record.id == ‘3’”, “type”: “container”, “body”: [ { “type”: “tpl”, “html”: “

测试测试
“ } ] } } ] }

  2. ## 表格行/列合并
  4. ```schema: scope="body"
  5. {
  6.     "type": "service",
  7.     "api": "/api/sample?perPage=10",
  8.     "body": [
  9.         {
  10.             "type": "table-v2",
  11.             "source": "$rows",
  12.             "columns": [
  13.                 {
  14.                     "title": "Engine",
  15.                     "key": "engine"
  16.                 },
  17.                 {
  18.                     "title": "Version",
  19.                     "key": "version",
  20.                     "rowSpanExpr": "<%= data.rowIndex === 2 ? 2 : 0 %>"
  21.                 },
  22.                 {
  23.                     "title": "Browser",
  24.                     "key": "browser"
  25.                 },
  26.                 {
  27.                     "title": "Badge",
  28.                     "key": "badgeText",
  29.                     "colSpanExpr": "<%= data.rowIndex === 6 ? 3 : 0 %>"
  30.                 },
  31.                 {
  32.                     "title": "Grade",
  33.                     "key": "grade"
  34.                 },
  35.                 {
  36.                     "title": "Platform",
  37.                     "key": "platform"
  38.                 }
  39.             ]
  40.         }
  41.     ]
  42. }

固定表头

```schema: scope=”body” { “type”: “service”, “api”: “/api/sample?perPage=10”, “body”: [ { “type”: “table-v2”, “source”: “$rows”, “scroll”: {“y” : 200}, “columns”: [ { “title”: “Engine”, “key”: “engine” }, { “title”: “Grade”, “key”: “grade” }, { “title”: “Platform”, “key”: “platform” } ] } ] }

  2. ## 固定列
  4. ```schema: scope="body"
  5. {
  6.     "type": "service",
  7.     "api": "/api/sample?perPage=6",
  8.     "body": [
  9.         {
  10.             "type": "table-v2",
  11.             "source": "$rows",
  12.             "scroll": {"x": 1000},
  13.             "columns": [
  14.                 {
  15.                     "title": "Engine",
  16.                     "key": "engine",
  17.                     "fixed": "left",
  18.                     "width": 100
  19.                 },
  20.                 {
  21.                     "title": "Version",
  22.                     "key": "version",
  23.                     "fixed": "left",
  24.                     "width": 100
  25.                 },
  26.                 {
  27.                     "title": "Browser",
  28.                     "key": "browser"
  29.                 },
  30.                 {
  31.                     "title": "Badge",
  32.                     "key": "badgeText"
  33.                 },
  34.                 {
  35.                     "title": "Grade",
  36.                     "key": "grade"
  37.                 },
  38.                 {
  39.                     "title": "Platform",
  40.                     "key": "platform",
  41.                     "fixed": "right"
  42.                 }
  43.             ]
  44.         }
  45.     ]
  46. }

固定头和列

```schema: scope=”body” { “type”: “service”, “api”: “/api/sample?perPage=10”, “body”: [ { “type”: “table-v2”, “source”: “$rows”, “scroll”: {“x”: 1000, “y”: 200}, “columns”: [ { “title”: “Engine”, “key”: “engine”, “fixed”: “left”, “width”: 100 }, { “title”: “Version”, “key”: “version”, “fixed”: “left”, “width”: 100 }, { “title”: “Browser”, “key”: “browser” }, { “title”: “Badge”, “key”: “badgeText” }, { “title”: “Grade”, “key”: “grade” }, { “title”: “Platform”, “key”: “platform”, “fixed”: “right” } ] } ] }

  2. ## 表头分组
  4. ```schema: scope="body"
  5. {
  6.     "type": "service",
  7.     "api": "/api/sample?perPage=10",
  8.     "body": [
  9.         {
  10.             "type": "table-v2",
  11.             "source": "$rows",
  12.             "scroll": {"y": 200},
  13.             "columns": [
  14.                 {
  15.                     "title": "Engine",
  16.                     "key": "engine",
  17.                 },
  18.                 {
  19.                     "title": "Version",
  20.                     "key": "version"
  21.                 },
  22.                 {
  23.                     "title": "Grade",
  24.                     "key": "grade"
  25.                 },
  26.                 {
  27.                     "title": "Grade1",
  28.                     "key": "grade1",
  29.                     "children": [
  30.                         {
  31.                             "title": "Browser",
  32.                             "key": "browser"
  33.                         },
  34.                         {
  35.                             "title": "Badge",
  36.                             "key": "badgeText",
  37.                             "children": [
  38.                                 {
  39.                                     "title": "ID",
  40.                                     "key": "id"
  41.                                 }
  42.                             ]
  43.                         }
  44.                     ]
  45.                 },
  46.                 {
  47.                     "title": "Platform",
  48.                     "key": "platform"
  49.                 }
  50.             ]
  51.         }
  52.     ]
  53. }

```schema: scope=”body” { “type”: “service”, “api”: “/api/sample?perPage=10”, “body”: [ { “type”: “table-v2”, “source”: “$rows”, “scroll”: {“y”: 200}, “columns”: [ { “title”: “Engine”, “key”: “engine”, }, { “title”: “Version”, “key”: “version” }, { “title”: “Grade”, “key”: “grade” }, { “title”: “Grade1”, “key”: “grade1”, “children”: [ { “title”: “Browser”, “key”: “browser” } ] }, { “title”: “Platform1”, “key”: “platform1”, “children”: [ { “title”: “Badge1”, “key”: “badgeText1”, “children”: [ { “title”: “ID”, “key”: “id” }, { “title”: “Platform”, “key”: “platform” }, { “title”: “Badge”, “key”: “badgeText” } ] } ] } ] } ] }

  2. ## 拖拽排序
  4. 支持手动拖动排序
  6. ### 默认拖拽排序
  8. ```schema: scope="body"
  9. {
  10.     "type": "service",
  11.     "api": "/api/sample?perPage=5",
  12.     "body": [
  13.         {
  14.             "type": "table-v2",
  15.             "source": "$rows",
  16.             "draggable": true,
  17.             "keyField": "id",
  18.             "columns": [
  19.                 {
  20.                     "title": "ID",
  21.                     "key": "id"
  22.                 },
  23.                 {
  24.                     "title": "Grade",
  25.                     "key": "grade"
  26.                 },
  27.                 {
  28.                     "title": "Browser",
  29.                     "key": "browser"
  30.                 },
  31.                 {
  32.                     "title": "Badge",
  33.                     "key": "badgeText",
  34.                     "children": [
  35.                         {
  36.                             "title": "Engine",
  37.                             "key": "engine",
  38.                         }
  39.                     ]
  40.                 },
  41.                 {
  42.                     "title": "Platform",
  43.                     "key": "platform"
  44.                 }
  45.             ]
  46.         }
  47.     ]
  48. }

嵌套拖拽排序

数据源嵌套情况下，仅允许同层级之间排序

```schema: scope=”body” { “type”:”page”, “body”:{ “type”:”service”, “data”:{ “rows”:[ { “engine”:”Trident”, “browser”:”Internet Explorer 4.0”, “platform”:”Win 95+”, “version”:”4”, “grade”:”X”, “id”:1, “children”:[ { “engine”:”Trident”, “browser”:”Internet Explorer 4.0”, “platform”:”Win 95+”, “version”:”4”, “grade”:”X”, “id”:1001, “children”:[ { “engine”:”Trident”, “browser”:”Internet Explorer 4.0”, “platform”:”Win 95+”, “version”:”4”, “grade”:”X”, “id”:10001 }, { “engine”:”Trident”, “browser”:”Internet Explorer 5.0”, “platform”:”Win 95+”, “version”:”5”, “grade”:”C”, “id”:10002 } ] }, { “engine”:”Trident”, “browser”:”Internet Explorer 5.0”, “platform”:”Win 95+”, “version”:”5”, “grade”:”C”, “id”:1002 } ] }, { “engine”:”Trident”, “browser”:”Internet Explorer 5.0”, “platform”:”Win 95+”, “version”:”5”, “grade”:”C”, “id”:2, “children”:[ { “engine”:”Trident”, “browser”:”Internet Explorer 4.0”, “platform”:”Win 95+”, “version”:”4”, “grade”:”X”, “id”:2001 }, { “engine”:”Trident”, “browser”:”Internet Explorer 5.0”, “platform”:”Win 95+”, “version”:”5”, “grade”:”C”, “id”:2002 } ] }, { “engine”:”Trident”, “browser”:”Internet Explorer 5.5”, “platform”:”Win 95+”, “version”:”5.5”, “grade”:”A”, “id”:3, “children”:[ { “engine”:”Trident”, “browser”:”Internet Explorer 4.0”, “platform”:”Win 95+”, “version”:”4”, “grade”:”X”, “id”:3001 }, { “engine”:”Trident”, “browser”:”Internet Explorer 5.0”, “platform”:”Win 95+”, “version”:”5”, “grade”:”C”, “id”:3002 } ] }, { “engine”:”Trident”, “browser”:”Internet Explorer 6”, “platform”:”Win 98+”, “version”:”6”, “grade”:”A”, “id”:4, “children”:[ { “engine”:”Trident”, “browser”:”Internet Explorer 4.0”, “platform”:”Win 95+”, “version”:”4”, “grade”:”X”, “id”:4001 }, { “engine”:”Trident”, “browser”:”Internet Explorer 5.0”, “platform”:”Win 95+”, “version”:”5”, “grade”:”C”, “id”:4002 } ] }, { “engine”:”Trident”, “browser”:”Internet Explorer 7”, “platform”:”Win XP SP2+”, “version”:”7”, “grade”:”A”, “id”:5, “children”:[ { “engine”:”Trident”, “browser”:”Internet Explorer 4.0”, “platform”:”Win 95+”, “version”:”4”, “grade”:”X”, “id”:5001 }, { “engine”:”Trident”, “browser”:”Internet Explorer 5.0”, “platform”:”Win 95+”, “version”:”5”, “grade”:”C”, “id”:5002 } ] } ] }, “body”:[ { “type”:”table-v2”, “source”:”$rows”, “columns”:[ { “key”:”engine”, “title”:”Engine” }, { “key”:”grade”, “title”:”Grade” }, { “key”:”browser”, “title”:”Browser” }, { “key”:”id”, “title”:”ID” }, { “key”:”platform”, “title”:”Platform” } ], “keyField”:”id”, “draggable”: true } ] } }

  2. ## 总结栏
  4. ### 顶部单行
  6. ```schema: scope="body"
  7. {
  8.     "type": "service",
  9.     "api": "/api/sample?perPage=10",
  10.     "body": [
  11.         {
  12.             "type": "table-v2",
  13.             "source": "$rows",
  14.             "scroll": {"y": 200},
  15.             "columns": [
  16.                 {
  17.                     "title": "Engine",
  18.                     "key": "engine",
  19.                 },
  20.                 {
  21.                     "title": "Version",
  22.                     "key": "version"
  23.                 },
  24.                 {
  25.                     "title": "Grade",
  26.                     "key": "grade"
  27.                 },
  28.                 {
  29.                     "title": "Browser",
  30.                     "key": "browser"
  31.                 },
  32.                 {
  33.                     "title": "Badge",
  34.                     "key": "badgeText"
  35.                 },
  36.                 {
  37.                     "title": "Platform",
  38.                     "key": "platform"
  39.                 }
  40.             ],
  41.             "headSummary": [
  42.                 {
  43.                     "type": "text",
  44.                     "text": "总计"
  45.                 },
  46.                 {
  47.                     "type": "tpl",
  48.                     "tpl": "测试测试",
  49.                     "colSpan": 5
  50.                 }
  51.             ],
  52.             "rowSelection": {
  53.                 "type": "checkbox",
  54.                 "keyField": "id"
  55.             }
  56.         }
  57.     ]
  58. }

顶部多行

```schema: scope=”body” { “type”: “service”, “api”: “/api/sample?perPage=10”, “body”: [ { “type”: “table-v2”, “source”: “$rows”, “scroll”: {“y”: 200}, “columns”: [ { “title”: “Engine”, “key”: “engine”, }, { “title”: “Version”, “key”: “version” }, { “title”: “Grade”, “key”: “grade” }, { “title”: “Browser”, “key”: “browser” }, { “title”: “Badge”, “key”: “badgeText” }, { “title”: “Platform”, “key”: “platform” } ], “headSummary”: [ [ { “type”: “text”, “text”: “总计” }, { “type”: “tpl”, “tpl”: “测试测试”, “colSpan”: 5 } ], [ { “type”: “text”, “text”: “总结”, “colSpan”: 6 } ] ], “rowSelection”: { “type”: “checkbox”, “keyField”: “id” } } ] }

  2. ### 尾部单行
  4. ```schema: scope="body"
  5. {
  6.     "type": "service",
  7.     "api": "/api/sample?perPage=10",
  8.     "body": [
  9.         {
  10.             "type": "table-v2",
  11.             "source": "$rows",
  12.             "bordered": true,
  13.             "scroll": {"y": 200, "x": 1000},
  14.             "columns": [
  15.                 {
  16.                     "title": "Engine",
  17.                     "key": "engine",
  18.                     "fixed": "left"
  19.                 },
  20.                 {
  21.                     "title": "Version",
  22.                     "key": "version"
  23.                 },
  24.                 {
  25.                     "title": "Grade",
  26.                     "key": "grade"
  27.                 },
  28.                 {
  29.                     "title": "Browser",
  30.                     "key": "browser"
  31.                 },
  32.                 {
  33.                     "title": "Badge",
  34.                     "key": "badgeText"
  35.                 },
  36.                 {
  37.                     "title": "Platform",
  38.                     "key": "platform"
  39.                 }
  40.             ],
  41.             "footSummary": [
  42.                 {
  43.                     "type": "text",
  44.                     "text": "总计",
  45.                     "fixed": 'left'
  46.                 },
  47.                 {
  48.                     "type": "tpl",
  49.                     "tpl": "测试测试",
  50.                     "colSpan": 5
  51.                 }
  52.             ]
  53.         }
  54.     ]
  55. }

尾部多行

```schema: scope=”body” { “type”: “service”, “api”: “/api/sample?perPage=10”, “body”: [ { “type”: “table-v2”, “source”: “$rows”, “bordered”: true, “scroll”: {“y”: 200, “x”: 1000}, “columns”: [ { “title”: “Engine”, “key”: “engine”, “fixed”: “left” }, { “title”: “Version”, “key”: “version” }, { “title”: “Grade”, “key”: “grade” }, { “title”: “Browser”, “key”: “browser” }, { “title”: “Badge”, “key”: “badgeText” }, { “title”: “Platform”, “key”: “platform” } ], “footSummary”: [ { “type”: “text”, “text”: “总计”, “colSpan”: 6 }, [ { “type”: “tpl”, “tpl”: “测试测试”, “colSpan”: 5 }, { “type”: “text”, “text”: “总结”, “colSpan”: 1 } ] ] } ] }

  2. ## 调整列宽
  4. ```schema: scope="body"
  5. {
  6.     "type": "service",
  7.     "api": "/api/sample?perPage=6",
  8.     "body": [
  9.         {
  10.             "type": "table-v2",
  11.             "source": "$rows",
  12.             "scroll": {"x": 1000},
  13.             "resizable": true,
  14.             "columns": [
  15.                 {
  16.                     "title": "Engine",
  17.                     "key": "engine",
  18.                     "width": 200,
  19.                     "align": "center"
  20.                 },
  21.                 {
  22.                     "title": "Version",
  23.                     "key": "version",
  24.                     "width": 200,
  25.                     "align": "right"
  26.                 },
  27.                 {
  28.                     "title": "Grade",
  29.                     "key": "grade",
  30.                     "width": 200
  31.                 },
  32.                 {
  33.                     "title": "Browser",
  34.                     "key": "browser",
  35.                     "width": 200
  36.                 },
  37.                 {
  38.                     "title": "Badge",
  39.                     "key": "badgeText"
  40.                 },
  41.                 {
  42.                     "title": "Platform",
  43.                     "key": "platform"
  44.                 }
  45.             ]
  46.         }
  47.     ]
  48. }

自定义列

```schema: scope=”body” { “type”: “service”, “api”: “/api/sample?perPage=6”, “body”: [ { “type”: “table-v2”, “source”: “$rows”, “columnsTogglable”: true, “title”: “表格的标题”, “columns”: [ { “title”: “Engine”, “key”: “engine”, “width”: 200 }, { “title”: “Version”, “key”: “version”, “width”: 200 }, { “title”: “Browser”, “key”: “browser”, “width”: 200, “children”: [ { “title”: “Grade”, “key”: “grade”, “width”: 200 } ] }, { “title”: “Badge”, “key”: “badgeText” }, { “title”: “Platform”, “key”: “platform” } ] } ] }

  2. ## 数据为空
  4. ```schema
  5. {
  6.     "type": "table-v2",
  7.     "data": {
  8.         "items": []
  9.     },
  10.     "columns": [
  11.         {
  12.             "title": "Engine",
  13.             "key": "engine",
  14.             "width": 200
  15.         },
  16.         {
  17.             "title": "Version",
  18.             "key": "version",
  19.             "width": 200
  20.         },
  21.         {
  22.             "title": "Browser",
  23.             "key": "browser",
  24.             "width": 200,
  25.             "children": [
  26.                 {
  27.                     "title": "Grade",
  28.                     "key": "grade",
  29.                     "width": 200
  30.                 }
  31.             ]
  32.         },
  33.         {
  34.             "title": "Platform",
  35.             "key": "platform",
  36.             "children": [
  37.                 {
  38.                     "title": "Badge",
  39.                     "key": "badgeText"
  40.                 }
  41.             ]
  42.         }
  43.     ],
  44.     "placeholder": "暂无数据"
  45. }

数据加载中

  1. {
  2.     "type": "table-v2",
  3.     "data": {
  4.         "items": []
  5.     },
  6.     "columns": [
  7.         {
  8.             "title": "Engine",
  9.             "key": "engine",
  10.             "width": 200
  11.         },
  12.         {
  13.             "title": "Version",
  14.             "key": "version",
  15.             "width": 200
  16.         },
  17.         {
  18.             "title": "Browser",
  19.             "key": "browser",
  20.             "width": 200,
  21.             "children": [
  22.                 {
  23.                     "title": "Grade",
  24.                     "key": "grade",
  25.                     "width": 200
  26.                 },
  27.                 {
  28.                     "title": "Badge",
  29.                     "key": "badgeText",
  30.                     "children": [
  31.                         {
  32.                             "title": "Platform",
  33.                             "key": "platform"
  34.                         }
  35.                     ]
  36.                 }
  37.             ]
  38.         }
  39.     ],
  40.     "loading": true
  41. }

树形结构

当行数据中存在 children 属性时，可以自动嵌套显示下去。也可以通过设置 childrenColumnName 进行配置。

默认嵌套

```schema: scope=”body” { “type”:”page”, “body”:{ “type”:”service”, “data”:{ “rows”:[ { “engine”:”Trident”, “browser”:”Internet Explorer 4.0”, “platform”:”Win 95+”, “version”:”4”, “grade”:”X”, “id”:1, “children”:[ { “engine”:”Trident”, “browser”:”Internet Explorer 4.0”, “platform”:”Win 95+”, “version”:”4”, “grade”:”X”, “id”:1001, “children”:[ { “engine”:”Trident”, “browser”:”Internet Explorer 4.0”, “platform”:”Win 95+”, “version”:”4”, “grade”:”X”, “id”:10001 }, { “engine”:”Trident”, “browser”:”Internet Explorer 5.0”, “platform”:”Win 95+”, “version”:”5”, “grade”:”C”, “id”:10002 } ] }, { “engine”:”Trident”, “browser”:”Internet Explorer 5.0”, “platform”:”Win 95+”, “version”:”5”, “grade”:”C”, “id”:1002 } ] }, { “engine”:”Trident”, “browser”:”Internet Explorer 5.0”, “platform”:”Win 95+”, “version”:”5”, “grade”:”C”, “id”:2, “children”:[ { “engine”:”Trident”, “browser”:”Internet Explorer 4.0”, “platform”:”Win 95+”, “version”:”4”, “grade”:”X”, “id”:2001 }, { “engine”:”Trident”, “browser”:”Internet Explorer 5.0”, “platform”:”Win 95+”, “version”:”5”, “grade”:”C”, “id”:2002 } ] }, { “engine”:”Trident”, “browser”:”Internet Explorer 5.5”, “platform”:”Win 95+”, “version”:”5.5”, “grade”:”A”, “id”:3, “children”:[ { “engine”:”Trident”, “browser”:”Internet Explorer 4.0”, “platform”:”Win 95+”, “version”:”4”, “grade”:”X”, “id”:3001 }, { “engine”:”Trident”, “browser”:”Internet Explorer 5.0”, “platform”:”Win 95+”, “version”:”5”, “grade”:”C”, “id”:3002 } ] }, { “engine”:”Trident”, “browser”:”Internet Explorer 6”, “platform”:”Win 98+”, “version”:”6”, “grade”:”A”, “id”:4, “children”:[ { “engine”:”Trident”, “browser”:”Internet Explorer 4.0”, “platform”:”Win 95+”, “version”:”4”, “grade”:”X”, “id”:4001 }, { “engine”:”Trident”, “browser”:”Internet Explorer 5.0”, “platform”:”Win 95+”, “version”:”5”, “grade”:”C”, “id”:4002 } ] }, { “engine”:”Trident”, “browser”:”Internet Explorer 7”, “platform”:”Win XP SP2+”, “version”:”7”, “grade”:”A”, “id”:5, “children”:[ { “engine”:”Trident”, “browser”:”Internet Explorer 4.0”, “platform”:”Win 95+”, “version”:”4”, “grade”:”X”, “id”:5001 }, { “engine”:”Trident”, “browser”:”Internet Explorer 5.0”, “platform”:”Win 95+”, “version”:”5”, “grade”:”C”, “id”:5002 } ] } ] }, “body”:[ { “type”:”table-v2”, “source”:”$rows”, “columns”:[ { “key”:”engine”, “title”:”Engine” }, { “key”:”grade”, “title”:”Grade” }, { “key”:”version”, “title”:”Version” }, { “key”:”browser”, “title”:”Browser” }, { “key”:”id”, “title”:”ID” }, { “key”:”platform”, “title”:”Platform” } ], “keyField”:”id” } ] } }

  2. ### 多选嵌套
  4. 表格支持多选的同时支持级联选中
  6. ```schema: scope="body"
  7. {
  8.     "type":"page",
  9.     "body":{
  10.         "type":"service",
  11.         "data":{
  12.             "rows":[
  13.                 {
  14.                     "engine":"Trident",
  15.                     "browser":"Internet Explorer 4.0",
  16.                     "platform":"Win 95+",
  17.                     "version":"4",
  18.                     "grade":"X",
  19.                     "id":1,
  20.                     "children":[
  21.                         {
  22.                             "engine":"Trident",
  23.                             "browser":"Internet Explorer 4.0",
  24.                             "platform":"Win 95+",
  25.                             "version":"4",
  26.                             "grade":"X",
  27.                             "id":1001,
  28.                             "children":[
  29.                                 {
  30.                                     "engine":"Trident",
  31.                                     "browser":"Internet Explorer 4.0",
  32.                                     "platform":"Win 95+",
  33.                                     "version":"4",
  34.                                     "grade":"X",
  35.                                     "id":10001
  36.                                 },
  37.                                 {
  38.                                     "engine":"Trident",
  39.                                     "browser":"Internet Explorer 5.0",
  40.                                     "platform":"Win 95+",
  41.                                     "version":"5",
  42.                                     "grade":"C",
  43.                                     "id":10002
  44.                                 }
  45.                             ]
  46.                         },
  47.                         {
  48.                             "engine":"Trident",
  49.                             "browser":"Internet Explorer 5.0",
  50.                             "platform":"Win 95+",
  51.                             "version":"5",
  52.                             "grade":"C",
  53.                             "id":1002
  54.                         }
  55.                     ]
  56.                 },
  57.                 {
  58.                     "engine":"Trident",
  59.                     "browser":"Internet Explorer 5.0",
  60.                     "platform":"Win 95+",
  61.                     "version":"5",
  62.                     "grade":"C",
  63.                     "id":2,
  64.                     "children":[
  65.                         {
  66.                             "engine":"Trident",
  67.                             "browser":"Internet Explorer 4.0",
  68.                             "platform":"Win 95+",
  69.                             "version":"4",
  70.                             "grade":"X",
  71.                             "id":2001
  72.                         },
  73.                         {
  74.                             "engine":"Trident",
  75.                             "browser":"Internet Explorer 5.0",
  76.                             "platform":"Win 95+",
  77.                             "version":"5",
  78.                             "grade":"C",
  79.                             "id":2002
  80.                         }
  81.                     ]
  82.                 },
  83.                 {
  84.                     "engine":"Trident",
  85.                     "browser":"Internet Explorer 5.5",
  86.                     "platform":"Win 95+",
  87.                     "version":"5.5",
  88.                     "grade":"A",
  89.                     "id":3,
  90.                     "children":[
  91.                         {
  92.                             "engine":"Trident",
  93.                             "browser":"Internet Explorer 4.0",
  94.                             "platform":"Win 95+",
  95.                             "version":"4",
  96.                             "grade":"X",
  97.                             "id":3001
  98.                         },
  99.                         {
  100.                             "engine":"Trident",
  101.                             "browser":"Internet Explorer 5.0",
  102.                             "platform":"Win 95+",
  103.                             "version":"5",
  104.                             "grade":"C",
  105.                             "id":3002
  106.                         }
  107.                     ]
  108.                 },
  109.                 {
  110.                     "engine":"Trident",
  111.                     "browser":"Internet Explorer 6",
  112.                     "platform":"Win 98+",
  113.                     "version":"6",
  114.                     "grade":"A",
  115.                     "id":4,
  116.                     "children":[
  117.                         {
  118.                             "engine":"Trident",
  119.                             "browser":"Internet Explorer 4.0",
  120.                             "platform":"Win 95+",
  121.                             "version":"4",
  122.                             "grade":"X",
  123.                             "id":4001
  124.                         },
  125.                         {
  126.                             "engine":"Trident",
  127.                             "browser":"Internet Explorer 5.0",
  128.                             "platform":"Win 95+",
  129.                             "version":"5",
  130.                             "grade":"C",
  131.                             "id":4002
  132.                         }
  133.                     ]
  134.                 },
  135.                 {
  136.                     "engine":"Trident",
  137.                     "browser":"Internet Explorer 7",
  138.                     "platform":"Win XP SP2+",
  139.                     "version":"7",
  140.                     "grade":"A",
  141.                     "id":5,
  142.                     "children":[
  143.                         {
  144.                             "engine":"Trident",
  145.                             "browser":"Internet Explorer 4.0",
  146.                             "platform":"Win 95+",
  147.                             "version":"4",
  148.                             "grade":"X",
  149.                             "id":5001
  150.                         },
  151.                         {
  152.                             "engine":"Trident",
  153.                             "browser":"Internet Explorer 5.0",
  154.                             "platform":"Win 95+",
  155.                             "version":"5",
  156.                             "grade":"C",
  157.                             "id":5002
  158.                         }
  159.                     ]
  160.                 }
  161.             ]
  162.         },
  163.         "body":[
  164.             {
  165.                 "type":"table-v2",
  166.                 "source":"$rows",
  167.                 "columns":[
  168.                     {
  169.                         "key":"engine",
  170.                         "title":"Engine"
  171.                     },
  172.                     {
  173.                         "key":"grade",
  174.                         "title":"Grade"
  175.                     },
  176.                     {
  177.                         "key":"version",
  178.                         "title":"Version"
  179.                     },
  180.                     {
  181.                         "key":"browser",
  182.                         "title":"Browser"
  183.                     },
  184.                     {
  185.                         "key":"id",
  186.                         "title":"ID"
  187.                     },
  188.                     {
  189.                         "key":"platform",
  190.                         "title":"Platform"
  191.                     }
  192.                 ],
  193.                 "keyField":"id",
  194.                 "rowSelection":{
  195.                     "type":"checkbox",
  196.                     "keyField":"id"
  197.                 }
  198.             }
  199.         ]
  200.     }
  201. }

单选嵌套

单选 不同层级之间都是互斥选择

```schema: scope=”body” { “type”:”page”, “body”:{ “type”:”service”, “data”:{ “rows”:[ { “engine”:”Trident”, “browser”:”Internet Explorer 4.0”, “platform”:”Win 95+”, “version”:”4”, “grade”:”X”, “id”:1, “children”:[ { “engine”:”Trident”, “browser”:”Internet Explorer 4.0”, “platform”:”Win 95+”, “version”:”4”, “grade”:”X”, “id”:1001, “children”:[ { “engine”:”Trident”, “browser”:”Internet Explorer 4.0”, “platform”:”Win 95+”, “version”:”4”, “grade”:”X”, “id”:10001 }, { “engine”:”Trident”, “browser”:”Internet Explorer 5.0”, “platform”:”Win 95+”, “version”:”5”, “grade”:”C”, “id”:10002 } ] }, { “engine”:”Trident”, “browser”:”Internet Explorer 5.0”, “platform”:”Win 95+”, “version”:”5”, “grade”:”C”, “id”:1002 } ] }, { “engine”:”Trident”, “browser”:”Internet Explorer 5.0”, “platform”:”Win 95+”, “version”:”5”, “grade”:”C”, “id”:2, “children”:[ { “engine”:”Trident”, “browser”:”Internet Explorer 4.0”, “platform”:”Win 95+”, “version”:”4”, “grade”:”X”, “id”:2001 }, { “engine”:”Trident”, “browser”:”Internet Explorer 5.0”, “platform”:”Win 95+”, “version”:”5”, “grade”:”C”, “id”:2002 } ] }, { “engine”:”Trident”, “browser”:”Internet Explorer 5.5”, “platform”:”Win 95+”, “version”:”5.5”, “grade”:”A”, “id”:3, “children”:[ { “engine”:”Trident”, “browser”:”Internet Explorer 4.0”, “platform”:”Win 95+”, “version”:”4”, “grade”:”X”, “id”:3001 }, { “engine”:”Trident”, “browser”:”Internet Explorer 5.0”, “platform”:”Win 95+”, “version”:”5”, “grade”:”C”, “id”:3002 } ] }, { “engine”:”Trident”, “browser”:”Internet Explorer 6”, “platform”:”Win 98+”, “version”:”6”, “grade”:”A”, “id”:4, “children”:[ { “engine”:”Trident”, “browser”:”Internet Explorer 4.0”, “platform”:”Win 95+”, “version”:”4”, “grade”:”X”, “id”:4001 }, { “engine”:”Trident”, “browser”:”Internet Explorer 5.0”, “platform”:”Win 95+”, “version”:”5”, “grade”:”C”, “id”:4002 } ] }, { “engine”:”Trident”, “browser”:”Internet Explorer 7”, “platform”:”Win XP SP2+”, “version”:”7”, “grade”:”A”, “id”:5, “children”:[ { “engine”:”Trident”, “browser”:”Internet Explorer 4.0”, “platform”:”Win 95+”, “version”:”4”, “grade”:”X”, “id”:5001 }, { “engine”:”Trident”, “browser”:”Internet Explorer 5.0”, “platform”:”Win 95+”, “version”:”5”, “grade”:”C”, “id”:5002 } ] } ] }, “body”:[ { “type”:”table-v2”, “source”:”$rows”, “columns”:[ { “key”:”engine”, “title”:”Engine” }, { “key”:”grade”, “title”:”Grade” }, { “key”:”version”, “title”:”Version” }, { “key”:”browser”, “title”:”Browser” }, { “key”:”id”, “title”:”ID” }, { “key”:”platform”, “title”:”Platform” } ], “keyField”:”id”, “rowSelection”:{ “type”:”radio”, “keyField”:”id” } } ] } }

  2. ### 缩进设置
  4. ```schema: scope="body"
  5. {
  6.     "type":"page",
  7.     "body":{
  8.         "type":"service",
  9.         "data":{
  10.             "rows":[
  11.                 {
  12.                     "engine":"Trident",
  13.                     "browser":"Internet Explorer 4.0",
  14.                     "platform":"Win 95+",
  15.                     "version":"4",
  16.                     "grade":"X",
  17.                     "id":1,
  18.                     "children":[
  19.                         {
  20.                             "engine":"Trident",
  21.                             "browser":"Internet Explorer 4.0",
  22.                             "platform":"Win 95+",
  23.                             "version":"4",
  24.                             "grade":"X",
  25.                             "id":1001,
  26.                             "children":[
  27.                                 {
  28.                                     "engine":"Trident",
  29.                                     "browser":"Internet Explorer 4.0",
  30.                                     "platform":"Win 95+",
  31.                                     "version":"4",
  32.                                     "grade":"X",
  33.                                     "id":10001
  34.                                 },
  35.                                 {
  36.                                     "engine":"Trident",
  37.                                     "browser":"Internet Explorer 5.0",
  38.                                     "platform":"Win 95+",
  39.                                     "version":"5",
  40.                                     "grade":"C",
  41.                                     "id":10002
  42.                                 }
  43.                             ]
  44.                         },
  45.                         {
  46.                             "engine":"Trident",
  47.                             "browser":"Internet Explorer 5.0",
  48.                             "platform":"Win 95+",
  49.                             "version":"5",
  50.                             "grade":"C",
  51.                             "id":1002
  52.                         }
  53.                     ]
  54.                 },
  55.                 {
  56.                     "engine":"Trident",
  57.                     "browser":"Internet Explorer 5.0",
  58.                     "platform":"Win 95+",
  59.                     "version":"5",
  60.                     "grade":"C",
  61.                     "id":2,
  62.                     "children":[
  63.                         {
  64.                             "engine":"Trident",
  65.                             "browser":"Internet Explorer 4.0",
  66.                             "platform":"Win 95+",
  67.                             "version":"4",
  68.                             "grade":"X",
  69.                             "id":2001
  70.                         },
  71.                         {
  72.                             "engine":"Trident",
  73.                             "browser":"Internet Explorer 5.0",
  74.                             "platform":"Win 95+",
  75.                             "version":"5",
  76.                             "grade":"C",
  77.                             "id":2002
  78.                         }
  79.                     ]
  80.                 },
  81.                 {
  82.                     "engine":"Trident",
  83.                     "browser":"Internet Explorer 5.5",
  84.                     "platform":"Win 95+",
  85.                     "version":"5.5",
  86.                     "grade":"A",
  87.                     "id":3,
  88.                     "children":[
  89.                         {
  90.                             "engine":"Trident",
  91.                             "browser":"Internet Explorer 4.0",
  92.                             "platform":"Win 95+",
  93.                             "version":"4",
  94.                             "grade":"X",
  95.                             "id":3001
  96.                         },
  97.                         {
  98.                             "engine":"Trident",
  99.                             "browser":"Internet Explorer 5.0",
  100.                             "platform":"Win 95+",
  101.                             "version":"5",
  102.                             "grade":"C",
  103.                             "id":3002
  104.                         }
  105.                     ]
  106.                 },
  107.                 {
  108.                     "engine":"Trident",
  109.                     "browser":"Internet Explorer 6",
  110.                     "platform":"Win 98+",
  111.                     "version":"6",
  112.                     "grade":"A",
  113.                     "id":4,
  114.                     "children":[
  115.                         {
  116.                             "engine":"Trident",
  117.                             "browser":"Internet Explorer 4.0",
  118.                             "platform":"Win 95+",
  119.                             "version":"4",
  120.                             "grade":"X",
  121.                             "id":4001
  122.                         },
  123.                         {
  124.                             "engine":"Trident",
  125.                             "browser":"Internet Explorer 5.0",
  126.                             "platform":"Win 95+",
  127.                             "version":"5",
  128.                             "grade":"C",
  129.                             "id":4002
  130.                         }
  131.                     ]
  132.                 },
  133.                 {
  134.                     "engine":"Trident",
  135.                     "browser":"Internet Explorer 7",
  136.                     "platform":"Win XP SP2+",
  137.                     "version":"7",
  138.                     "grade":"A",
  139.                     "id":5,
  140.                     "children":[
  141.                         {
  142.                             "engine":"Trident",
  143.                             "browser":"Internet Explorer 4.0",
  144.                             "platform":"Win 95+",
  145.                             "version":"4",
  146.                             "grade":"X",
  147.                             "id":5001
  148.                         },
  149.                         {
  150.                             "engine":"Trident",
  151.                             "browser":"Internet Explorer 5.0",
  152.                             "platform":"Win 95+",
  153.                             "version":"5",
  154.                             "grade":"C",
  155.                             "id":5002
  156.                         }
  157.                     ]
  158.                 }
  159.             ]
  160.         },
  161.         "body":[
  162.             {
  163.                 "type":"table-v2",
  164.                 "source":"$rows",
  165.                 "columns":[
  166.                     {
  167.                         "key":"engine",
  168.                         "title":"Engine"
  169.                     },
  170.                     {
  171.                         "key":"grade",
  172.                         "title":"Grade"
  173.                     },
  174.                     {
  175.                         "key":"version",
  176.                         "title":"Version"
  177.                     },
  178.                     {
  179.                         "key":"browser",
  180.                         "title":"Browser"
  181.                     },
  182.                     {
  183.                         "key":"id",
  184.                         "title":"ID"
  185.                     },
  186.                     {
  187.                         "key":"platform",
  188.                         "title":"Platform"
  189.                     }
  190.                 ],
  191.                 "keyField":"id",
  192.                 "rowSelection":{
  193.                     "type":"checkbox",
  194.                     "keyField":"id"
  195.                 },
  196.                 "indentSize": 20
  197.             }
  198.         ]
  199.     }
  200. }

列搜索

```schema: scope=”body” { “type”: “service”, “api”: “/api/sample?perPage=6”, “body”: [ { “type”: “table-v2”, “source”: “$rows”, “columns”: [ { “title”: “Engine”, “key”: “engine”, “width”: 200 }, { “title”: “Version”, “key”: “version”, “width”: 200, “searchable”: true }, { “title”: “Browser”, “key”: “browser”, “width”: 200, “children”: [ { “title”: “Grade”, “key”: “grade”, “width”: 200 } ] }, { “title”: “Badge”, “key”: “badgeText” }, { “title”: “Platform”, “key”: “platform” } ] } ] }

  2. ## 粘性头部
  4. ```schema: scope="body"
  5. {
  6.     "type": "service",
  7.     "api": "/api/sample?perPage=6",
  8.     "body": [
  9.         {
  10.             "type": "table-v2",
  11.             "source": "$rows",
  12.             "title": "表格的标题",
  13.             "columns": [
  14.                 {
  15.                     "title": "Engine",
  16.                     "key": "engine",
  17.                     "width": 200
  18.                 },
  19.                 {
  20.                     "title": "Version",
  21.                     "key": "version",
  22.                     "width": 200
  23.                 },
  24.                 {
  25.                     "title": "Browser",
  26.                     "key": "browser",
  27.                     "width": 200,
  28.                     "children": [
  29.                         {
  30.                             "title": "Grade",
  31.                             "key": "grade",
  32.                             "width": 200
  33.                         }
  34.                     ]
  35.                 },
  36.                 {
  37.                     "title": "Badge",
  38.                     "key": "badgeText"
  39.                 },
  40.                 {
  41.                     "title": "Platform",
  42.                     "key": "platform"
  43.                 }
  44.             ],
  45.             "sticky": true
  46.         }
  47.     ]
  48. }

表格尺寸

通过设置size属性来控制表格尺寸，支持large、default、small，default是中等尺寸

最大尺寸

large是最大尺寸

```schema: scope=”body” { “type”: “service”, “api”: “/api/sample?perPage=6”, “body”: [ { “type”: “table-v2”, “source”: “$rows”, “size”: “large”, “rowSelection”: { “type”: “checkbox”, “keyField”: “id” }, “columns”: [ { “title”: “Engine”, “key”: “engine”, “sorter”: true, “tpl”: “${engine|truncate:5}” }, { “title”: “Version”, “key”: “version”, “sorter”: true, “filterMultiple”: true, “filters”: [ { “text”: “Joe”, “value”: “Joe” }, { “text”: “Jim”, “value”: “Jim” } ] }, { “type”: “tpl”, “title”: “Browser”, “key”: “browser”, “tpl”: “${browser|truncate:5}”, “searchable”: true }, { “title”: “Badge”, “key”: “badgeText” }, { “title”: “Platform”, “key”: “platform” } ], “footSummary”: [ { “type”: “text”, “text”: “总计”, “fixed”: “left” }, { “type”: “tpl”, “tpl”: “测试测试”, “colSpan”: 5 } ] } ] }

  2. ### 默认尺寸
  4. 默认尺寸是`default`，即中等尺寸
  6. ```schema: scope="body"
  7. {
  8.     "type": "service",
  9.     "api": "/api/sample?perPage=6",
  10.     "body": [
  11.         {
  12.             "type": "table-v2",
  13.             "source": "$rows",
  14.             "rowSelection": {
  15.                 "type": "checkbox",
  16.                 "keyField": "id"
  17.             },
  18.             "columns": [
  19.                 {
  20.                     "title": "Engine",
  21.                     "key": "engine",
  22.                     "sorter": true,
  23.                     "tpl": "${engine|truncate:5}"
  24.                 },
  25.                 {
  26.                     "title": "Version",
  27.                     "key": "version",
  28.                     "sorter": true,
  29.                     "filterMultiple": true,
  30.                     "filters": [
  31.                         {
  32.                             "text": "Joe",
  33.                             "value": "Joe"
  34.                         },
  35.                         {
  36.                             "text": "Jim",
  37.                             "value": "Jim"
  38.                         }
  39.                     ]
  40.                 },
  41.                 {
  42.                     "type": "tpl",
  43.                     "title": "Browser",
  44.                     "key": "browser",
  45.                     "tpl": "${engine|truncate:5}",
  46.                     "searchable": true
  47.                 },
  48.                 {
  49.                     "title": "Badge",
  50.                     "key": "badgeText"
  51.                 },
  52.                 {
  53.                     "title": "Platform",
  54.                     "key": "platform"
  55.                 }
  56.             ],
  57.             "footSummary": [
  58.                 {
  59.                     "type": "text",
  60.                     "text": "总计",
  61.                     "fixed": "left"
  62.                 },
  63.                 {
  64.                     "type": "tpl",
  65.                     "tpl": "测试测试",
  66.                     "colSpan": 5
  67.                 }
  68.             ]
  69.         }
  70.     ]
  71. }

小尺寸

最小尺寸

```schema: scope=”body” { “type”: “service”, “api”: “/api/sample?perPage=6”, “body”: [ { “type”: “table-v2”, “source”: “$rows”, “size”: “small”, “rowSelection”: { “type”: “checkbox”, “keyField”: “id” }, “columns”: [ { “title”: “Engine”, “key”: “engine”, “sorter”: true, “tpl”: “${engine|truncate:5}” }, { “title”: “Version”, “key”: “version”, “sorter”: true, “filterMultiple”: true, “filters”: [ { “text”: “Joe”, “value”: “Joe” }, { “text”: “Jim”, “value”: “Jim” } ] }, { “type”: “tpl”, “title”: “Browser”, “key”: “browser”, “tpl”: “${engine|truncate:5}”, “searchable”: true }, { “title”: “Badge”, “key”: “badgeText” }, { “title”: “Platform”, “key”: “platform” } ], “footSummary”: [ { “type”: “text”, “text”: “总计”, “fixed”: “left” }, { “type”: “tpl”, “tpl”: “测试测试”, “colSpan”: 5 } ] } ] }

  2. ## 可复制
  4. ```schema: scope="body"
  5. {
  6.     "type": "service",
  7.     "api": "/api/sample?perPage=6",
  8.     "body": [
  9.         {
  10.             "type": "table-v2",
  11.             "source": "$rows",
  12.             "title": "表格的标题",
  13.             "columns": [
  14.                 {
  15.                     "title": "Engine",
  16.                     "key": "engine",
  17.                     "width": 200
  18.                 },
  19.                 {
  20.                     "title": "Version",
  21.                     "key": "version",
  22.                     "copyable": true
  23.                 },
  24.                 {
  25.                     "title": "Browser",
  26.                     "key": "browser",
  27.                     "width": 200
  28.                 },
  29.                 {
  30.                     "title": "Badge",
  31.                     "key": "badgeText"
  32.                 },
  33.                 {
  34.                     "title": "Platform",
  35.                     "key": "platform"
  36.                 }
  37.             ]
  38.         }
  39.     ]
  40. }

弹出框

可以给列配置上popOver属性，默认会在该列内容区里渲染一个图标，点击会显示弹出框，用于展示内容

```schema: scope=”body” { “type”: “service”, “api”: “/api/sample?perPage=6”, “body”: [ { “type”: “table-v2”, “source”: “$rows”, “columns”: [ { “title”: “Engine”, “key”: “engine” }, { “title”: “Version”, “key”: “version” }, { “title”: “Browser”, “key”: “browser”, “copyable”: true, “popOver”: { “body”: { “type”: “tpl”, “tpl”: “详细信息：${browser}” } } }, { “title”: “Badge”, “key”: “badgeText” }, { “title”: “Platform”, “key”: “platform” } ] } ] }

  2. 也可以设置图标不展示，结合truncate实现内容自动省略，其余可点击/悬浮查看更多
  4. ```schema: scope="body"
  5. {
  6.     "type": "service",
  7.     "api": "/api/sample?perPage=6",
  8.     "body": [
  9.         {
  10.             "type": "table-v2",
  11.             "source": "$rows",
  12.             "columns": [
  13.                 {
  14.                     "title": "Engine",
  15.                     "key": "engine"
  16.                 },
  17.                 {
  18.                     "title": "Version",
  19.                     "key": "version"
  20.                 },
  21.                 {
  22.                     "type": "tpl",
  23.                     "title": "Browser",
  24.                     "key": "browser",
  25.                     "tpl": "${engine|truncate:5}",
  26.                     "popOver": {
  27.                         "trigger": "hover",
  28.                         "position": "left-top",
  29.                         "showIcon": false,
  30.                         "body": {
  31.                             "type": "tpl",
  32.                             "tpl": "${browser}"
  33.                         }
  34.                     }
  35.                 },
  36.                 {
  37.                     "title": "Badge",
  38.                     "key": "badgeText"
  39.                 },
  40.                 {
  41.                     "title": "Platform",
  42.                     "key": "platform"
  43.                 }
  44.             ]
  45.         }
  46.     ]
  47. }

可以给列配置popOverEnableOn属性，该属性为表达式，来控制当前行是否启动popOver功能

```schema: scope=”body” { “type”: “service”, “api”: “/api/sample?perPage=6”, “body”: [ { “type”: “table-v2”, “source”: “$rows”, “columns”: [ { “title”: “ID”, “key”: “id”, “popOver”: { “body”: { “type”: “tpl”, “tpl”: “${id}” } }, “popOverEnableOn”: “this.id == 1” }, { “title”: “Engine”, “key”: “engine” }, { “title”: “Version”, “key”: “version” }, { “title”: “Browser”, “key”: “browser”, “popOver”: { “body”: { “type”: “tpl”, “tpl”: “${browser}” } } }, { “title”: “Badge”, “key”: “badgeText” }, { “title”: “Platform”, “key”: “platform” } ] } ] }

  2. ## 行角标
  4. 通过属性`itemBadge`，可以为表格行配置[角标]($docs-zh-CN-components-badge)，可以使用[数据映射](../../../docs/concepts/data-mapping)为每一行添加特定的 Badge 属性。[`visibleOn`](../../../docs/concepts/expression)属性控制显示的条件，表达式中`this`可以取到行所在上下文的数据，比如行数据中有`badgeText`字段才显示角标，可以设置`"visibleOn": "this.badgeText"`
  6. ```schema: scope="body"
  7. {
  8.   "type": "service",
  9.   "body": {
  10.     "type": "table-v2",
  11.     "source": "${table}",
  12.     "syncLocation": false,
  13.     "showBadge": true,
  14.     "itemBadge": {
  15.       "text": "${badgeText}",
  16.       "mode": "ribbon",
  17.       "position": "top-left",
  18.       "level": "${badgeLevel}",
  19.       "visibleOn": "this.badgeText"
  20.     },
  21.     "columns": [
  22.         {
  23.             "key": "id",
  24.             "title": "ID",
  25.             "searchable": {
  26.               "type": "input-text",
  27.               "name": "id",
  28.               "label": "主键",
  29.               "placeholder": "输入id",
  30.               "size": "sm",
  31.             }
  32.         },
  33.         {
  34.             "key": "engine",
  35.             "title": "Rendering engine"
  36.         },
  37.         {
  38.             "key": "browser",
  39.             "title": "Browser",
  40.             "searchable": {
  41.               "type": "select",
  42.               "name": "browser",
  43.               "label": "浏览器",
  44.               "placeholder": "选择浏览器",
  45.               "size": "sm",
  46.               "options": [
  47.                 {
  48.                   "label": "Internet Explorer ",
  49.                   "value": "ie"
  50.                 },
  51.                 {
  52.                   "label": "AOL browser",
  53.                   "value": "aol"
  54.                 },
  55.                 {
  56.                   "label": "Firefox",
  57.                   "value": "firefox"
  58.                 }
  59.               ]
  60.             }
  61.         },
  62.         {
  63.             "key": "platform",
  64.             "title": "Platform(s)"
  65.         },
  66.         {
  67.             "key": "version",
  68.             "title": "Engine version",
  69.             "searchable": {
  70.               "type": "input-number",
  71.               "name": "version",
  72.               "label": "版本号",
  73.               "placeholder": "输入版本号",
  74.               "size": "sm",
  75.               "mode": "horizontal"
  76.             }
  77.         },
  78.         {
  79.             "key": "grade",
  80.             "title": "CSS grade"
  81.         }
  82.     ]
  83.   },
  84.   data: {
  85.     table: [
  86.       {
  87.         "id": 1,
  88.         "engine": "Trident",
  89.         "browser": "Internet Explorer 4.0",
  90.         "platform": "Win 95+",
  91.         "version": "4",
  92.         "grade": "X",
  93.         "badgeText": "默认",
  94.         "badgeLevel": "info"
  95.       },
  96.       {
  97.         "id": 2,
  98.         "engine": "Trident",
  99.         "browser": "Internet Explorer 5.0",
  100.         "platform": "Win 95+",
  101.         "version": "5",
  102.         "grade": "C",
  103.         "badgeText": "危险",
  104.         "badgeLevel": "danger"
  105.       },
  106.       {
  107.         "id": 3,
  108.         "engine": "Trident",
  109.         "browser": "Internet Explorer 5.5",
  110.         "platform": "Win 95+",
  111.         "version": "5.5",
  112.         "grade": "A"
  113.       },
  114.       {
  115.         "id": 4,
  116.         "engine": "Trident",
  117.         "browser": "Internet Explorer 6",
  118.         "platform": "Win 98+",
  119.         "version": "6",
  120.         "grade": "A"
  121.       },
  122.       {
  123.         "id": 5,
  124.         "engine": "Trident",
  125.         "browser": "Internet Explorer 7",
  126.         "platform": "Win XP SP2+",
  127.         "version": "7",
  128.         "grade": "A"
  129.       }
  130.     ]
  131.   }
  132. }

表头提示

通过设置列属性remark，可为每一列的表头增加提示信息。

```schema: scope=”body” { “type”: “page”, “body”: { “type”: “service”, “api”: “/api/sample?perPage=5”, “body”: [ { “type”: “table-v2”, “source”: “$rows”, “columns”: [ { “title”: “Engine”, “key”: “engine”, “remark”: “表头提示” }, { “title”: “Version”, “key”: “version” }, { “title”: “Browser”, “key”: “browser” }, { “title”: “Badge”, “key”: “badgeText” }, { “title”: “Grade”, “key”: “grade” }, { “title”: “Platform”, “key”: “platform” } ] } ] } }

  2. ## 快速编辑
  4. 可以通过给列配置：`"quickEdit": true`，Table配置：`quickSaveApi`，可以实现表格内快速编辑并批量保存的功能。
  6. ```schema: scope="body"
  7. {
  8.   "type": "page",
  9.   "body": {
  10.     "type": "service",
  11.     "api": "/api/sample?perPage=5",
  12.     "body": [
  13.       {
  14.         "type": "table-v2",
  15.         "source": "$rows",
  16.         "quickSaveApi": {
  17.             "url": "/api/mock2/sample/bulkUpdate",
  18.             "method": "put"
  19.         },
  20.         "columns": [
  21.           {
  22.             "title": "Engine",
  23.             "key": "engine",
  24.             "quickEdit": true
  25.           },
  26.           {
  27.             "title": "Version",
  28.             "key": "version"
  29.           },
  30.           {
  31.             "title": "Browser",
  32.             "key": "browser"
  33.           },
  34.           {
  35.             "title": "Badge",
  36.             "key": "badgeText"
  37.           }
  38.         ]
  39.       }
  40.     ]
  41.   }
  42. }

指定编辑表单项类型

quickEdit也可以配置对象形式，可以指定编辑表单项的类型，例如"type": "select"：

```schema: scope=”body” { “type”: “page”, “body”: { “type”: “service”, “api”: “/api/sample?perPage=5”, “body”: [ { “type”: “table-v2”, “source”: “$rows”, “quickSaveApi”: { “url”: “/api/mock2/sample/bulkUpdate”, “method”: “put” }, “columns”: [ { “key”: “id”, “title”: “ID” }, { “key”: “grade”, “title”: “CSS grade”, “quickEdit”: { “type”: “select”, “options”: [ “A”, “B”, “C”, “D”, “X” ] } } ] } ] } }

  2. #### 快速编辑多个表单项
  4. ```schema: scope="body"
  5. {
  6.   "type": "page",
  7.   "body": {
  8.         "type": "service",
  9.         "api": "/api/sample?perPage=5",
  10.         "body": [
  11.             {
  12.                 "type": "table-v2",
  13.                 "source": "$rows",
  14.                 "quickSaveApi": {
  15.                     "url": "/api/mock2/sample/bulkUpdate",
  16.                     "method": "put"
  17.                 },
  18.                 "columns": [
  19.                     {
  20.                         "key": "id",
  21.                         "title": "ID"
  22.                     },
  23.                     {
  24.                         "key": "grade",
  25.                         "title": "CSS grade",
  26.                         "quickEdit": {
  27.                             "body": [
  28.                                 {
  29.                                     "type": "select",
  30.                                     "name": "grade",
  31.                                     "options": [
  32.                                         "A",
  33.                                         "B",
  34.                                         "C",
  35.                                         "D",
  36.                                         "X"
  37.                                     ]
  38.                                 },
  40.                                 {
  41.                                     "label": "id",
  42.                                     "type": "input-text",
  43.                                     "name": "id"
  44.                                 }
  45.                             ]
  46.                         }
  47.                     }
  48.                 ]
  49.             }
  50.         ]
  51.     }
  52. }

内联模式

配置quickEdit的mode为inline。可以直接将编辑表单项渲染至表格内，可以直接操作编辑。

```schema: scope=”body” { “type”: “page”, “body”: { “type”: “service”, “api”: “/api/sample?perPage=5”, “body”: [ { “type”: “table-v2”, “source”: “$rows”, “quickSaveApi”: { “url”: “/api/mock2/sample/bulkUpdate”, “method”: “put” }, “columns”: [ { “key”: “id”, “title”: “ID” }, { “key”: “grade”, “title”: “CSS grade”, “quickEdit”: { “mode”: “inline”, “type”: “select”, “size”: “xs”, “options”: [ “A”, “B”, “C”, “D”, “X” ] } }, { “key”: “switch”, “title”: “switch”, “quickEdit”: { “mode”: “inline”, “type”: “switch”, “onText”: “开启”, “offText”: “关闭” } } ] } ] } }

  2. #### 即时保存
  4. 如果想编辑完表单项之后，不想点击顶部确认按钮来进行保存，而是即时保存当前标记的数据，则需要配置 `quickEdit` 中的 `"saveImmediately": true`，然后配置接口`quickSaveItemApi`，可以直接将编辑表单项渲染至表格内操作。
  6. ```schema: scope="body"
  7. {
  8.   "type": "page",
  9.   "body": {
  10.         "type": "service",
  11.         "api": "/api/sample?perPage=5",
  12.         "body": [
  13.             {
  14.                 "type": "table-v2",
  15.                 "source": "$rows",
  16.                 "quickSaveItemApi": {
  17.                     "url": "/api/mock2/sample/$id",
  18.                     "method": "put"
  19.                 },
  20.                 "columns": [
  21.                     {
  22.                         "key": "id",
  23.                         "title": "ID"
  24.                     },
  25.                     {
  26.                         "key": "grade",
  27.                         "title": "CSS grade",
  28.                         "quickEdit": {
  29.                             "mode": "inline",
  30.                             "type": "select",
  31.                             "size": "xs",
  32.                             "options": [
  33.                                 "A",
  34.                                 "B",
  35.                                 "C",
  36.                                 "D",
  37.                                 "X"
  38.                             ],
  39.                             "saveImmediately": true
  40.                         }
  41.                     },
  42.                     {
  43.                         "key": "switch",
  44.                         "title": "switch",
  45.                         "quickEdit": {
  46.                             "mode": "inline",
  47.                             "type": "switch",
  48.                             "onText": "开启",
  49.                             "offText": "关闭",
  50.                             "saveImmediately": true
  51.                         }
  52.                     }
  53.                 ]
  54.             }
  55.         ]
  56.     }
  57. }

你也可以在saveImmediately中配置 api，实现即时保存

```schema: scope=”body” { “type”: “page”, “body”: { “type”: “service”, “api”: “/api/sample?perPage=5”, “body”: [ { “type”: “table-v2”, “source”: “$rows”, “columns”: [ { “key”: “id”, “title”: “ID” }, { “key”: “grade”, “title”: “CSS grade”, “quickEdit”: { “mode”: “inline”, “type”: “select”, “size”: “xs”, “options”: [ “A”, “B”, “C”, “D”, “X” ], “saveImmediately”: { “api”: “/api/mock2/sample/$id” } } }, { “key”: “grade”, “title”: “CSS grade”, “quickEdit”: { “mode”: “inline”, “type”: “switch”, “onText”: “开启”, “offText”: “关闭”, “saveImmediately”: true } } ] } ] } }

  2. ## 列样式
  4. 可以通过设置`columns`中的`className`控制整列样式
  6. ```schema: scope="body"
  7. {
  8.     "type": "service",
  9.     "api": "/api/sample?perPage=5",
  10.     "body": [
  11.         {
  12.             "type": "table-v2",
  13.             "source": "$rows",
  14.             "columns": [
  15.                 {
  16.                     "title": "Engine",
  17.                     "key": "engine"
  18.                 },
  19.                 {
  20.                     "title": "Version",
  21.                     "key": "version",
  22.                     "className": "text-primary"
  23.                 },
  24.                 {
  25.                     "title": "Browser",
  26.                     "key": "browser"
  27.                 },
  28.                 {
  29.                     "title": "Operation",
  30.                     "key": "operation",
  31.                     "type": "button",
  32.                     "label": "删除",
  33.                     "size": "sm"
  34.                 }
  35.             ]
  36.         }
  37.     ]
  38. }

也可以通过titleClassName单独控制表头对应单元格的样式

```schema: scope=”body” { “type”: “service”, “api”: “/api/sample?perPage=5”, “body”: [ { “type”: “table-v2”, “source”: “$rows”, “columns”: [ { “title”: “Engine”, “key”: “engine” }, { “title”: “Version”, “key”: “version”, “className”: “text-primary”, “titleClassName”: “font-bold” }, { “title”: “Browser”, “key”: “browser” }, { “title”: “Operation”, “key”: “operation”, “type”: “button”, “label”: “删除”, “size”: “sm” } ] } ] }

  2. ## 单元格样式
  4. 可以通过设置`columns`的`classNameExpr`，根据数据动态添加单元格CSS类，支持模版语法
  6. ```schema: scope="body"
  7. {
  8.     "type": "service",
  9.     "api": "/api/sample?perPage=5",
  10.     "body": [
  11.         {
  12.             "type": "table-v2",
  13.             "source": "$rows",
  14.             "columns": [
  15.                 {
  16.                     "title": "Engine",
  17.                     "key": "engine"
  18.                 },
  19.                 {
  20.                     "title": "Version",
  21.                     "key": "version",
  22.                     "classNameExpr": "<%= data.version > 5 ? 'text-danger' : '' %>"
  23.                 },
  24.                 {
  25.                     "title": "Browser",
  26.                     "key": "browser"
  27.                 },
  28.                 {
  29.                     "title": "Operation",
  30.                     "key": "operation",
  31.                     "type": "button",
  32.                     "label": "删除",
  33.                     "size": "sm"
  34.                 }
  35.             ]
  36.         }
  37.     ]
  38. }

行操作按钮

通过设置itemActions可以设置鼠标移动到行上出现操作按钮

```schema: scope=”body” { “type”: “service”, “api”: “/api/sample?perPage=5”, “body”: [ { “type”: “table-v2”, “source”: “$rows”, “itemActions”: [ { “label”: “编辑”, “type”: “button”, “actionType”: “dialog”, “dialog”: { “title”: “编辑”, “body”: “这是个简单的编辑弹框” } }, { “label”: “删除”, “type”: “button”, “actionType”: “ajax”, “confirmText”: “确认要删除？”, “api”: “/api/mock2/form/saveForm” } ], “columns”: [ { “title”: “Engine”, “key”: “engine” }, { “title”: “Version”, “key”: “version” } ] } ] }

  2. 固定表头情况下，展示行操作按钮
  4. ```schema: scope="body"
  5. {
  6.     "type": "service",
  7.     "api": "/api/sample?perPage=20",
  8.     "body": [
  9.         {
  10.             "type": "table-v2",
  11.             "source": "$rows",
  12.             "itemActions": [
  13.                 {
  14.                     "label": "编辑",
  15.                     "type": "button",
  16.                     "actionType": "dialog",
  17.                     "dialog": {
  18.                         "title": "编辑",
  19.                         "body": "这是个简单的编辑弹框"
  20.                     }
  21.                 },
  22.                 {
  23.                     "label": "删除",
  24.                     "type": "button",
  25.                     "actionType": "ajax",
  26.                     "confirmText": "确认要删除？",
  27.                     "api": "/api/mock2/form/saveForm"
  28.                 }
  29.             ],
  30.             "scroll": {
  31.                 "y": 100
  32.             },
  33.             "columns": [
  34.                 {
  35.                     "title": "Engine",
  36.                     "key": "engine"
  37.                 },
  38.                 {
  39.                     "title": "Version",
  40.                     "key": "version"
  41.                 }
  42.             ]
  43.         }
  44.     ]
  45. }

属性表

属性名 类型 默认值 说明
type string "type" 指定为 table 渲染器
title string 标题
source string ${items} 数据源, 绑定当前环境变量
sticky boolean false 是否粘性头部
footer string \ Schema 表格尾部
loading boolean 表格是否加载中
columnsTogglable auto 或者 boolean auto 展示列显示开关, 自动即：列数量大于或等于 5 个时自动开启
placeholder string \ Schema 暂无数据 当没数据的时候的文字提示
rowSelection rowSelection 行相关配置
rowClassNameExpr string 行 CSS 类名，支持模版语法
expandable Expandable 展开行配置
lineHeight large \ middle 行高设置
footerClassName string Action.md-table-footer 底部外层 CSS 类名
toolbarClassName string Action.md-table-toolbar 工具栏 CSS 类名
columns Array<Column> 用来设置列信息
combineNum number 自动合并单元格
itemActions Array<Action> 悬浮行操作按钮组
itemCheckableOn 表达式 配置当前行是否可勾选的条件，要用 表达式
itemDraggableOn 表达式 配置当前行是否可拖拽的条件，要用 表达式
checkOnItemClick boolean false 点击数据行是否可以勾选当前行
rowClassName string 给行添加 CSS 类名
rowClassNameExpr 模板 通过模板给行添加 CSS 类名
prefixRow Array 顶部总结行
affixRow Array 底部总结行
itemBadge BadgeSchema 行角标配置
autoFillHeight boolean 内容区域自适应高度

行配置属性表

属性名 类型 默认值 说明
type checkbox \ radio checkbox 指定单选还是多选
fixed boolean 选择列是否固定，只能左侧固定
keyField string key 对应数据源的key值，默认是key，可指定为id、shortId等
disableOn string 当前行是否可选择条件，要用 表达式
selections selections 自定义筛选菜单，内置all（全选）、invert（反选）、none（取消选择）、odd（选择奇数项）、even（选择偶数项）
selectedRowKeys `Array<string number>` 已选择项
selectedRowKeysExpr string 已选择项正则表达式
columnWidth number 自定义选择列列宽
rowClick boolean 单条任意区域选中

选择菜单配置属性表

属性名 类型 默认值 说明
key all \ invert \ none \ odd \ even all 菜单类型，内置全选、反选、取消选择、选择奇数项、选择偶数项
text string 自定义菜单项文本

展开行配置属性表

属性名 类型 默认值 说明
expandableOn string 指定可展开的行，要用 表达式
keyField string key 对应数据源的key值，默认是key，可指定为id、shortId等
disableOn string 当前行是否可选择条件，要用 表达式
selections selections 自定义筛选菜单，内置all（全选）、invert（反选）、none（取消选择）、odd（选择奇数项）、even（选择偶数项）
selectedRowKeys `Array<string number>` 已选择项
selectedRowKeysExpr string 已选择项正则表达式
columnWidth number 自定义选择列列宽

列配置属性表

属性名 类型 默认值 说明
label 模板 表头文本内容
name string 通过名称关联数据
fixed left \ right \ none 是否固定当前列
popOver 弹出框
quickEdit 快速编辑
copyable boolean 或 {icon: string, content:string} 是否可复制
sortable boolean false 是否可排序
searchable boolean \ Schema false 是否可快速搜索
width number \ string 列宽
remark 提示信息