2021-12-24 11:05:02 +08:00
|
|
|
|
---
|
2022-08-15 19:20:26 +08:00
|
|
|
|
title: Table2 表格
|
2021-12-24 11:05:02 +08:00
|
|
|
|
description:
|
|
|
|
|
type: 0
|
|
|
|
|
group: ⚙ 组件
|
|
|
|
|
menuName: Table 表格
|
|
|
|
|
icon:
|
|
|
|
|
order: 67
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
表格展示,不支持配置初始化接口初始化数据域,所以需要搭配类似像`Service`这样的,具有配置接口初始化数据域功能的组件,或者手动进行数据域初始化,然后通过`source`属性,获取数据链中的数据,完成数据展示。
|
|
|
|
|
|
|
|
|
|
## 基本用法
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
可配置表头(`title`)、表尾(`footer`),同时支持文本或者 schema 类型。
|
|
|
|
|
|
2021-12-24 11:05:02 +08:00
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=5",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2023-11-02 19:33:30 +08:00
|
|
|
|
"title": "表格标题 - ${rows.length}",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2023-10-12 19:07:38 +08:00
|
|
|
|
"name": "engine",
|
|
|
|
|
"width": 120
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2023-08-31 19:23:49 +08:00
|
|
|
|
"name": "version",
|
|
|
|
|
"type": "property",
|
|
|
|
|
"items": [
|
|
|
|
|
{
|
|
|
|
|
"label": "cpu",
|
|
|
|
|
"content": "1 core"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "memory",
|
|
|
|
|
"content": "4G"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "disk",
|
|
|
|
|
"content": "80G"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "network",
|
|
|
|
|
"content": "4M",
|
|
|
|
|
"span": 2
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "IDC",
|
|
|
|
|
"content": "beijing"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "Note",
|
|
|
|
|
"content": "其它说明",
|
|
|
|
|
"span": 3
|
|
|
|
|
}
|
|
|
|
|
]
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Operation",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "operation",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"type": "button",
|
|
|
|
|
"label": "删除",
|
|
|
|
|
"size": "sm"
|
|
|
|
|
}
|
|
|
|
|
],
|
2023-11-02 19:33:30 +08:00
|
|
|
|
"footer": {
|
|
|
|
|
"type": "tpl",
|
|
|
|
|
"tpl": "表格Footer"
|
|
|
|
|
}
|
2021-12-24 11:05:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2021-12-31 17:33:11 +08:00
|
|
|
|
## 可选择
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
可以通过配置`rowSelection`来支持单选或者多选,也可以配置`selectable`、`multiple`结合来实现,其中`selectable`、`multiple`的优先级更高。
|
2021-12-31 17:33:11 +08:00
|
|
|
|
|
|
|
|
|
### 多选
|
2021-12-24 11:05:02 +08:00
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
可以简单将`rowSelection`设置为`true`开启多选,也可以给`rowSelection`配置更多属性,不指定`type`则默认为多选。也可以设置`selectable`为`true`,同时`multiple`设置为`true`,同样可以开启多选。
|
|
|
|
|
|
2021-12-24 11:05:02 +08:00
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=5",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"rowSelection": {
|
|
|
|
|
"type": "checkbox",
|
|
|
|
|
"keyField": "id"
|
|
|
|
|
},
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Operation",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "operation",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"type": "button",
|
|
|
|
|
"label": "删除",
|
|
|
|
|
"size": "sm"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2021-12-31 17:33:11 +08:00
|
|
|
|
### 点击整行选择
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
目前仅能通过`rowSelection.rowClick`属性来开启。
|
|
|
|
|
|
2021-12-31 17:33:11 +08:00
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=5",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"rowSelection": {
|
|
|
|
|
"type": "checkbox",
|
|
|
|
|
"keyField": "id",
|
|
|
|
|
"rowClick": true
|
|
|
|
|
},
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Operation",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "operation",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"type": "button",
|
|
|
|
|
"label": "删除",
|
|
|
|
|
"size": "sm"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### 已选择
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
通过`rowSelection.selectedRowKeys`属性来设置表格内已选中的项,可以使用`primaryField`、`rowSelection.keyField`或者`keyField`指定数据源中用来做值匹配的字段,优先级依次递减。
|
|
|
|
|
|
2021-12-31 17:33:11 +08:00
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=5",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"rowSelection": {
|
|
|
|
|
"type": "checkbox",
|
|
|
|
|
"keyField": "id",
|
|
|
|
|
"selectedRowKeys": [1, 2]
|
|
|
|
|
},
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "ID",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "id"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Operation",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "operation",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"type": "button",
|
|
|
|
|
"label": "删除",
|
|
|
|
|
"size": "sm"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### 已选择 - 正则表达式
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
还可以使用正则表达式的方式来匹配已选中的项,`rowSelection.selectedRowKeysExpr`可以配置表达式。
|
|
|
|
|
|
2021-12-31 17:33:11 +08:00
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=5",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"rowSelection": {
|
|
|
|
|
"type": "checkbox",
|
|
|
|
|
"keyField": "id",
|
2022-05-23 14:32:52 +08:00
|
|
|
|
"selectedRowKeysExpr": "data.record.id === 1"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "ID",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "id"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Operation",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "operation",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"type": "button",
|
|
|
|
|
"label": "删除",
|
|
|
|
|
"size": "sm"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### 单选
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
设置`rowSelection.type`为`radio`或者设置`selectable`为`true`、`multiple`为`false`来实现单选,同时可通过`rowSelection.disableOn`来控制哪一行不可选,不可选情况下默认会有禁用样式,但如果行内有除文字外的其他组件,禁用样式需要自行控制。
|
2021-12-24 11:05:02 +08:00
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=5",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"rowSelection": {
|
|
|
|
|
"type": "radio",
|
|
|
|
|
"keyField": "id",
|
|
|
|
|
"disableOn": "this.record.id === 1"
|
|
|
|
|
},
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### 自定义选择菜单
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
内置全选`all`、反选`invert`、清空`none`、选中奇数行`odd`、选中偶数行`even`,可以通过`rowSelection.selections`自行配置,超出内置功能范围的不支持,配置了也无法使用。被禁用的行不参与计算奇偶数。
|
2021-12-31 17:33:11 +08:00
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=5",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"rowSelection": {
|
|
|
|
|
"type": "checkbox",
|
|
|
|
|
"keyField": "id",
|
|
|
|
|
"selections": [
|
|
|
|
|
{
|
|
|
|
|
"key": "all",
|
|
|
|
|
"text": "全选所有"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"key": "invert",
|
|
|
|
|
"text": "反选当页"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"key": "none",
|
|
|
|
|
"text": "清空所有"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"key": "odd",
|
|
|
|
|
"text": "选择奇数行"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"key": "even",
|
|
|
|
|
"text": "选择偶数行"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Operation",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "operation",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"type": "button",
|
|
|
|
|
"label": "删除",
|
|
|
|
|
"size": "sm"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-09-16 10:55:35 +08:00
|
|
|
|
### 最大选择个数
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
可通过设置`maxKeepItemSelectionLength`控制表格可选中的最大个数。
|
2022-09-16 10:55:35 +08:00
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=5",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
|
|
|
|
"type": "table2",
|
|
|
|
|
"source": "$rows",
|
|
|
|
|
"maxKeepItemSelectionLength": 2,
|
|
|
|
|
"rowSelection": {
|
|
|
|
|
"type": "checkbox",
|
|
|
|
|
"keyField": "id"
|
|
|
|
|
},
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
|
|
|
|
"name": "engine"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
|
|
|
|
"name": "version"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
|
|
|
|
"name": "browser"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Operation",
|
|
|
|
|
"name": "operation",
|
|
|
|
|
"type": "button",
|
|
|
|
|
"label": "删除",
|
|
|
|
|
"size": "sm"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2021-12-24 11:05:02 +08:00
|
|
|
|
## 筛选和排序
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
通过设置`column.sorter`开启列排序,只能通过`crud2`来看实际效果。通过`column.filters`开启列筛选,支持单选、多选两种模式,同样依赖`crud2`查看实际效果。
|
|
|
|
|
|
2021-12-24 11:05:02 +08:00
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=5",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"sorter": true,
|
|
|
|
|
"filterMultiple": true,
|
|
|
|
|
"filters": [
|
|
|
|
|
{
|
|
|
|
|
"text": "Joe",
|
|
|
|
|
"value": "Joe"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"text": "Jim",
|
|
|
|
|
"value": "Jim"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"sorter": true,
|
|
|
|
|
"width": 100
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"filters": [
|
|
|
|
|
{
|
|
|
|
|
"text": "Joe",
|
|
|
|
|
"value": "Joe"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"text": "Jim",
|
|
|
|
|
"value": "Jim"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 带边框
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
可通过`bordered`属性控制表格是否有边框。
|
|
|
|
|
|
2021-12-24 11:05:02 +08:00
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=5",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"bordered": true,
|
|
|
|
|
"title": "标题",
|
|
|
|
|
"footer": "Footer",
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Operation",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "operation",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"type": "button",
|
|
|
|
|
"label": "删除",
|
|
|
|
|
"size": "sm"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 可展开
|
|
|
|
|
|
2022-09-30 17:57:29 +08:00
|
|
|
|
支持点击按钮展开/关闭当前行的自定义内容,展开按钮可放在表格的最左侧、最右侧或通过事件动作来触发展开。
|
|
|
|
|
|
|
|
|
|
### 默认展开
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
可简单设置`expandable`为`true`开启行展开功能,也可以在`expandable`属性上配置更多功能,`expandable.expandableOn`控制哪些行可以展开,`expandable.expandedRowKeys`控制哪些行默认展开,默认展开按钮放在表格最左侧。
|
2022-09-30 17:57:29 +08:00
|
|
|
|
|
2021-12-24 11:05:02 +08:00
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=5",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Operation",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "operation",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"type": "button",
|
|
|
|
|
"label": "删除",
|
|
|
|
|
"size": "sm"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"expandable": {
|
2022-09-30 17:57:29 +08:00
|
|
|
|
"expandableOn": "this.record && (this.record.id === 1 || this.record.id === 3)",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"keyField": "id",
|
2023-11-02 19:33:30 +08:00
|
|
|
|
"expandedRowClassNameExpr": "<%= data.rowIndex === 2 ? 'bg-success' : '' %>",
|
2022-06-23 11:27:27 +08:00
|
|
|
|
"expandedRowKeys": ["3"],
|
|
|
|
|
"type": "container",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
|
|
|
|
"type": "tpl",
|
|
|
|
|
"html": "<div class=\"test\">测试测试</div>"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
2021-12-31 17:33:11 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-09-30 17:57:29 +08:00
|
|
|
|
### 默认展开 - 正则表达式
|
2021-12-31 17:33:11 +08:00
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
也可以通过设置`expandable.expandedRowKeysExpr`使用正则表达式来控制默认展开项。
|
|
|
|
|
|
2021-12-31 17:33:11 +08:00
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=5",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Operation",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "operation",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"type": "button",
|
|
|
|
|
"label": "删除",
|
|
|
|
|
"size": "sm"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"expandable": {
|
2022-09-30 17:57:29 +08:00
|
|
|
|
"expandableOn": "this.record && (this.record.id === 1 || this.record.id === 3)",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"keyField": "id",
|
|
|
|
|
"expandedRowClassNameExpr": "<%= data.rowIndex % 2 ? 'bg-success' : '' %>",
|
2022-06-23 11:27:27 +08:00
|
|
|
|
"expandedRowKeysExpr": "data.record.id == '3'",
|
|
|
|
|
"type": "container",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
|
|
|
|
"type": "tpl",
|
|
|
|
|
"html": "<div class=\"test\">测试测试</div>"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
2021-12-24 11:05:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-09-30 17:57:29 +08:00
|
|
|
|
### 右侧展开按钮
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
通过设置`expandable.position`属性为`right`控制,支持不设置(展示在左侧)、`left`、`right`、`none`(无展开按钮)四种情况。
|
2022-09-30 17:57:29 +08:00
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=5",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
|
|
|
|
"type": "table2",
|
|
|
|
|
"source": "$rows",
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
|
|
|
|
"name": "engine"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
|
|
|
|
"name": "version"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
|
|
|
|
"name": "browser"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Operation",
|
|
|
|
|
"name": "operation",
|
|
|
|
|
"type": "button",
|
|
|
|
|
"label": "删除",
|
|
|
|
|
"size": "sm"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"expandable": {
|
|
|
|
|
"expandableOn": "this.record && (this.record.id === 1 || this.record.id === 3)",
|
|
|
|
|
"keyField": "id",
|
|
|
|
|
"expandedRowClassNameExpr": "<%= data.rowIndex % 2 ? 'bg-success' : '' %>",
|
|
|
|
|
"expandedRowKeys": ["3"],
|
|
|
|
|
"type": "container",
|
|
|
|
|
"position": "right",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
|
|
|
|
"type": "tpl",
|
|
|
|
|
"html": "<div class=\"test\">测试测试</div>"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
"footSummary": [
|
|
|
|
|
{
|
|
|
|
|
"type": "text",
|
|
|
|
|
"text": "总计"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "tpl",
|
|
|
|
|
"tpl": "测试测试",
|
|
|
|
|
"colSpan": 2
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "tpl",
|
|
|
|
|
"tpl": "最后一列"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### 无展开按钮
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
设置成无展开按钮形式,通过事件动作控制展开关闭,可单独行控制。
|
2022-09-30 17:57:29 +08:00
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=5",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
|
|
|
|
"type": "table2",
|
|
|
|
|
"source": "$rows",
|
|
|
|
|
"id": "table-select",
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
|
|
|
|
"name": "engine"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
|
|
|
|
"name": "version"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
|
|
|
|
"name": "browser"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Operation",
|
|
|
|
|
"name": "operation",
|
|
|
|
|
"type": "button",
|
|
|
|
|
"label": "展开",
|
|
|
|
|
"size": "sm",
|
|
|
|
|
"onEvent": {
|
|
|
|
|
"click": {
|
|
|
|
|
"actions": [
|
|
|
|
|
{
|
|
|
|
|
"actionType": "expand",
|
|
|
|
|
"componentId": "table-select",
|
|
|
|
|
"description": "展开行",
|
|
|
|
|
"args": {
|
|
|
|
|
"value": "${id}"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"expandable": {
|
|
|
|
|
"keyField": "id",
|
|
|
|
|
"expandedRowClassNameExpr": "<%= data.rowIndex % 2 ? 'bg-success' : '' %>",
|
|
|
|
|
"type": "container",
|
|
|
|
|
"position": "none",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
|
|
|
|
"type": "tpl",
|
|
|
|
|
"html": "<div class=\"test\">测试测试</div>"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
也可以通过正则表达式一次控制多行展开关闭。
|
2022-09-30 17:57:29 +08:00
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=5",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
|
|
|
|
"type": "container",
|
|
|
|
|
"style": {
|
|
|
|
|
"marginBottom": "5px"
|
|
|
|
|
},
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
|
|
|
|
"type": "button",
|
|
|
|
|
"label": "展开",
|
|
|
|
|
"size": "sm",
|
|
|
|
|
"onEvent": {
|
|
|
|
|
"click": {
|
|
|
|
|
"actions": [
|
|
|
|
|
{
|
|
|
|
|
"actionType": "expand",
|
|
|
|
|
"componentId": "table-select2",
|
|
|
|
|
"description": "展开行",
|
|
|
|
|
"args": {
|
|
|
|
|
"expandedRowsExpr": "data.record?.id === 1 || data.record?.id === 3"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "table2",
|
|
|
|
|
"source": "$rows",
|
|
|
|
|
"id": "table-select2",
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
|
|
|
|
"name": "engine"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
|
|
|
|
"name": "version"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
|
|
|
|
"name": "browser"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"expandable": {
|
|
|
|
|
"keyField": "id",
|
|
|
|
|
"expandedRowClassNameExpr": "<%= data.rowIndex % 2 ? 'bg-success' : '' %>",
|
|
|
|
|
"type": "container",
|
|
|
|
|
"position": "none",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
|
|
|
|
"type": "tpl",
|
|
|
|
|
"html": "<div class=\"test\">测试测试</div>"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2021-12-24 11:05:02 +08:00
|
|
|
|
## 表格行/列合并
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
可以通过设置`column.rowSpanExpr`来实现行合并,`column.colSpanExpr`来实现列合并。
|
|
|
|
|
|
2021-12-24 11:05:02 +08:00
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=10",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"rowSpanExpr": "<%= data.rowIndex === 2 ? 2 : 0 %>"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Badge",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "badgeText",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"colSpanExpr": "<%= data.rowIndex === 6 ? 3 : 0 %>"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Grade",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "grade"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Platform",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "platform"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 固定表头
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
给`scroll.y`设置一个固定高度,当表格行数据超过该高度时,会自动出现滚动条。
|
|
|
|
|
|
2021-12-24 11:05:02 +08:00
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=10",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"scroll": {"y" : 200},
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Grade",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "grade"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Platform",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "platform"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 固定列
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
如果列数足够多或者设置`scroll.x`一个超出表格可视范围的宽度,表格会自动出现横向滚动条,此时可以通过`column.fixed`来固定列,保证左右滑动的时候,一些关键列始终可见。
|
|
|
|
|
|
2021-12-24 11:05:02 +08:00
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=6",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"scroll": {"x": 1000},
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"fixed": "left",
|
|
|
|
|
"width": 100
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"fixed": "left",
|
|
|
|
|
"width": 100
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Badge",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "badgeText"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Grade",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "grade"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Platform",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "platform",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"fixed": "right"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 固定头和列
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
同时设置`scroll.y`和`column.fixed`,内容超过可视范围,表格会自动出现横向、纵向滚动条,实现同时固定表头和指定列。
|
|
|
|
|
|
2021-12-24 11:05:02 +08:00
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=10",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"scroll": {"x": 1000, "y": 200},
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"fixed": "left",
|
|
|
|
|
"width": 100
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version",
|
2023-10-12 19:07:38 +08:00
|
|
|
|
"type": "property",
|
|
|
|
|
"width": 400,
|
|
|
|
|
"items": [
|
|
|
|
|
{
|
|
|
|
|
"label": "cpu",
|
|
|
|
|
"content": "1 core"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "memory",
|
|
|
|
|
"content": "4G"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "disk",
|
|
|
|
|
"content": "80G"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "network",
|
|
|
|
|
"content": "4M",
|
|
|
|
|
"span": 2
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "IDC",
|
|
|
|
|
"content": "beijing"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "Note",
|
|
|
|
|
"content": "其它说明",
|
|
|
|
|
"span": 3
|
|
|
|
|
}
|
|
|
|
|
]
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Badge",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "badgeText"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Grade",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "grade"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Platform",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "platform",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"fixed": "right"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 表头分组
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
通过`column.children`可以设置表头分组,实现多级表头,可以任意组合多级嵌套。
|
|
|
|
|
|
2021-12-24 11:05:02 +08:00
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=10",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"scroll": {"y": 200},
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Grade",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "grade"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Grade1",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "grade1",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"children": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Badge",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "badgeText",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"children": [
|
|
|
|
|
{
|
|
|
|
|
"title": "ID",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "id"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Platform",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "platform"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
`children`里的配置同`columns`,可以灵活组合,支持无限层级。
|
|
|
|
|
|
2021-12-24 11:05:02 +08:00
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"api": "/api/sample?perPage=10",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"source": "$rows",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"scroll": {"y": 200},
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Grade",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "grade"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title": "Grade1",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "grade1",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"children": [
|
|
|
|
|
{
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title": "Platform1",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "platform1",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"children": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Badge1",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "badgeText1",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"children": [
|
|
|
|
|
{
|
|
|
|
|
"title": "ID",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "id"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Platform",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "platform"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Badge",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "badgeText"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
2021-12-24 11:05:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2021-12-31 17:33:11 +08:00
|
|
|
|
## 拖拽排序
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
设置`draggable`为`true`,开启手动拖动排序。
|
2021-12-31 17:33:11 +08:00
|
|
|
|
|
|
|
|
|
### 默认拖拽排序
|
2021-12-24 11:05:02 +08:00
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"api": "/api/sample?perPage=5",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"source": "$rows",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"draggable": true,
|
2022-05-23 14:32:52 +08:00
|
|
|
|
"keyField": "id",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"columns": [
|
|
|
|
|
{
|
2022-05-23 14:32:52 +08:00
|
|
|
|
"title": "ID",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "id"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title": "Grade",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "grade"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Badge",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "badgeText",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"children": [
|
|
|
|
|
{
|
2022-05-23 14:32:52 +08:00
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Platform",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "platform"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### 嵌套拖拽排序
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
数据源嵌套情况下,仅允许同层级之间排序。
|
2021-12-31 17:33:11 +08:00
|
|
|
|
|
|
|
|
|
```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":[
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type":"table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source":"$rows",
|
|
|
|
|
"columns":[
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"engine",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"Engine"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"grade",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"Grade"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"browser",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"Browser"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"id",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"ID"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"platform",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"Platform"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"keyField":"id",
|
|
|
|
|
"draggable": true
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 总结栏
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
支持在表格的顶部或底部设置总结栏。
|
|
|
|
|
|
2021-12-31 17:33:11 +08:00
|
|
|
|
### 顶部单行
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
`headSummary`设置顶部导航栏,一维数组为单行,列数和表格列不一致的情况下,需要手动设置`colSpan`来保证总结栏展示和表格对应。
|
|
|
|
|
|
2021-12-31 17:33:11 +08:00
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=10",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"scroll": {"y": 200},
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Grade",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "grade"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Badge",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "badgeText"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Platform",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "platform"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"headSummary": [
|
|
|
|
|
{
|
|
|
|
|
"type": "text",
|
|
|
|
|
"text": "总计"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "tpl",
|
|
|
|
|
"tpl": "测试测试",
|
|
|
|
|
"colSpan": 5
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"rowSelection": {
|
|
|
|
|
"type": "checkbox",
|
|
|
|
|
"keyField": "id"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2021-12-31 17:33:11 +08:00
|
|
|
|
### 顶部多行
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
`headSummary`设置为二维数组实现顶部多行。
|
|
|
|
|
|
2021-12-31 17:33:11 +08:00
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=10",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"scroll": {"y": 200},
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Grade",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "grade"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Badge",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "badgeText"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Platform",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "platform"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"headSummary": [
|
|
|
|
|
[
|
|
|
|
|
{
|
|
|
|
|
"type": "text",
|
|
|
|
|
"text": "总计"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "tpl",
|
|
|
|
|
"tpl": "测试测试",
|
|
|
|
|
"colSpan": 5
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
[
|
|
|
|
|
{
|
|
|
|
|
"type": "text",
|
|
|
|
|
"text": "总结",
|
|
|
|
|
"colSpan": 6
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
],
|
|
|
|
|
"rowSelection": {
|
|
|
|
|
"type": "checkbox",
|
|
|
|
|
"keyField": "id"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### 尾部单行
|
2021-12-24 11:05:02 +08:00
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
`footSummary`设置尾部总结行,格式同`headSummary`。
|
|
|
|
|
|
2021-12-24 11:05:02 +08:00
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=10",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"bordered": true,
|
|
|
|
|
"scroll": {"y": 200, "x": 1000},
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"fixed": "left"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Grade",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "grade"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Badge",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "badgeText"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Platform",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "platform"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"footSummary": [
|
|
|
|
|
{
|
|
|
|
|
"type": "text",
|
|
|
|
|
"text": "总计",
|
|
|
|
|
"fixed": 'left'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "tpl",
|
|
|
|
|
"tpl": "测试测试",
|
|
|
|
|
"colSpan": 5
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2021-12-31 17:33:11 +08:00
|
|
|
|
### 尾部多行
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
如果二维数组中出现了非数组,那么认为是第一行的数据追加进去。
|
|
|
|
|
|
2021-12-31 17:33:11 +08:00
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=10",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"bordered": true,
|
|
|
|
|
"scroll": {"y": 200, "x": 1000},
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"fixed": "left"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Grade",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "grade"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Badge",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "badgeText"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Platform",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "platform"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"footSummary": [
|
|
|
|
|
{
|
|
|
|
|
"type": "text",
|
|
|
|
|
"text": "总计",
|
|
|
|
|
"colSpan": 6
|
|
|
|
|
},
|
|
|
|
|
[
|
|
|
|
|
{
|
|
|
|
|
"type": "tpl",
|
|
|
|
|
"tpl": "测试测试",
|
|
|
|
|
"colSpan": 5
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "text",
|
|
|
|
|
"text": "总结",
|
|
|
|
|
"colSpan": 1
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2021-12-24 11:05:02 +08:00
|
|
|
|
## 调整列宽
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
通过设置`resizable`为`true`开启列宽调整功能,开启后可以手动拖动来调整某一列的宽度。
|
|
|
|
|
|
2021-12-24 11:05:02 +08:00
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=6",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"scroll": {"x": 1000},
|
|
|
|
|
"resizable": true,
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"width": 200,
|
|
|
|
|
"align": "center"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"width": 200,
|
|
|
|
|
"align": "right"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Grade",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "grade",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"width": 200
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"width": 200
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Badge",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "badgeText"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Platform",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "platform"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 自定义列
|
|
|
|
|
|
2023-03-07 18:01:40 +08:00
|
|
|
|
### 默认
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
可简单设置`columnsTogglable`为`true`快速开启自定义列功能,适用于列数较多的情况,可以手动控制展示或隐藏一些列。
|
|
|
|
|
|
2021-12-24 11:05:02 +08:00
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=6",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"source": "$rows",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"columnsTogglable": true,
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"title": "表格的标题",
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"width": 200
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"width": 200
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"width": 200,
|
|
|
|
|
"children": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Grade",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "grade",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"width": 200
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Badge",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "badgeText"
|
2023-03-07 18:01:40 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Platform",
|
|
|
|
|
"name": "platform"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### 自定义图标
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
如果默认的自定义列图标不能满足需求,可以通过设置`columnsTogglable.icon`来自定义图标。
|
|
|
|
|
|
2023-03-07 18:01:40 +08:00
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=6",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
|
|
|
|
"type": "table2",
|
|
|
|
|
"source": "$rows",
|
|
|
|
|
"columnsTogglable": {
|
|
|
|
|
"icon": "fa fa-user"
|
|
|
|
|
},
|
|
|
|
|
"title": "表格的标题",
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
|
|
|
|
"name": "engine",
|
|
|
|
|
"width": 200
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
|
|
|
|
"name": "version",
|
|
|
|
|
"width": 200
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
|
|
|
|
"name": "browser",
|
|
|
|
|
"width": 200,
|
|
|
|
|
"children": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Grade",
|
|
|
|
|
"name": "grade",
|
|
|
|
|
"width": 200
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Badge",
|
|
|
|
|
"name": "badgeText"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Platform",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "platform"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 数据为空
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
可以通过`placeholder`自定义数据为空时的展示内容,支持文本或者 schema 类型。
|
|
|
|
|
|
2021-12-24 11:05:02 +08:00
|
|
|
|
```schema
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"data": {
|
|
|
|
|
"items": []
|
|
|
|
|
},
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"width": 200
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"width": 200
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"width": 200,
|
|
|
|
|
"children": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Grade",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "grade",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"width": 200
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Platform",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "platform",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"children": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Badge",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "badgeText"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"placeholder": "暂无数据"
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2021-12-31 17:33:11 +08:00
|
|
|
|
## 数据加载中
|
2021-12-24 11:05:02 +08:00
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
可以通过`loading`自定义数据加载时的展示内容,支持布尔或者 schema 类型。
|
|
|
|
|
|
2021-12-24 11:05:02 +08:00
|
|
|
|
```schema
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"data": {
|
|
|
|
|
"items": []
|
|
|
|
|
},
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"width": 200
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"width": 200
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"width": 200,
|
|
|
|
|
"children": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Grade",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "grade",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"width": 200
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Badge",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "badgeText",
|
2021-12-24 11:05:02 +08:00
|
|
|
|
"children": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Platform",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "platform"
|
2021-12-24 11:05:02 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"loading": true
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 树形结构
|
|
|
|
|
|
2021-12-31 17:33:11 +08:00
|
|
|
|
当行数据中存在 children 属性时,可以自动嵌套显示下去。也可以通过设置 childrenColumnName 进行配置。
|
2021-12-24 11:05:02 +08:00
|
|
|
|
|
2021-12-31 17:33:11 +08:00
|
|
|
|
### 默认嵌套
|
2021-12-24 11:05:02 +08:00
|
|
|
|
|
2021-12-31 17:33:11 +08:00
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type":"page",
|
|
|
|
|
"body":{
|
|
|
|
|
"type":"service",
|
|
|
|
|
"data":{
|
|
|
|
|
"rows":[
|
|
|
|
|
{
|
2023-10-12 19:07:38 +08:00
|
|
|
|
"engine":"Trident1",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"browser":"Internet Explorer 4.0",
|
|
|
|
|
"platform":"Win 95+",
|
|
|
|
|
"version":"4",
|
|
|
|
|
"grade":"X",
|
|
|
|
|
"id":1,
|
|
|
|
|
"children":[
|
|
|
|
|
{
|
2023-10-12 19:07:38 +08:00
|
|
|
|
"engine":"Trident1-1",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"browser":"Internet Explorer 4.0",
|
|
|
|
|
"platform":"Win 95+",
|
|
|
|
|
"version":"4",
|
|
|
|
|
"grade":"X",
|
|
|
|
|
"id":1001,
|
|
|
|
|
"children":[
|
|
|
|
|
{
|
2023-10-12 19:07:38 +08:00
|
|
|
|
"engine":"Trident1-1-1",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"browser":"Internet Explorer 4.0",
|
|
|
|
|
"platform":"Win 95+",
|
|
|
|
|
"version":"4",
|
|
|
|
|
"grade":"X",
|
|
|
|
|
"id":10001
|
|
|
|
|
},
|
|
|
|
|
{
|
2023-10-12 19:07:38 +08:00
|
|
|
|
"engine":"Trident1-1-2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"browser":"Internet Explorer 5.0",
|
|
|
|
|
"platform":"Win 95+",
|
|
|
|
|
"version":"5",
|
|
|
|
|
"grade":"C",
|
|
|
|
|
"id":10002
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
2023-10-12 19:07:38 +08:00
|
|
|
|
"engine":"Trident1-2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"browser":"Internet Explorer 5.0",
|
|
|
|
|
"platform":"Win 95+",
|
|
|
|
|
"version":"5",
|
|
|
|
|
"grade":"C",
|
|
|
|
|
"id":1002
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
2023-10-12 19:07:38 +08:00
|
|
|
|
"engine":"Trident2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"browser":"Internet Explorer 5.0",
|
|
|
|
|
"platform":"Win 95+",
|
|
|
|
|
"version":"5",
|
|
|
|
|
"grade":"C",
|
|
|
|
|
"id":2,
|
|
|
|
|
"children":[
|
|
|
|
|
{
|
2023-10-12 19:07:38 +08:00
|
|
|
|
"engine":"Trident2-1",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"browser":"Internet Explorer 4.0",
|
|
|
|
|
"platform":"Win 95+",
|
|
|
|
|
"version":"4",
|
|
|
|
|
"grade":"X",
|
|
|
|
|
"id":2001
|
|
|
|
|
},
|
|
|
|
|
{
|
2023-10-12 19:07:38 +08:00
|
|
|
|
"engine":"Trident2-2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"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":[
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type":"table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source":"$rows",
|
|
|
|
|
"columns":[
|
2023-10-12 19:07:38 +08:00
|
|
|
|
{
|
|
|
|
|
"name":"id",
|
|
|
|
|
"title":"ID"
|
|
|
|
|
},
|
2021-12-31 17:33:11 +08:00
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"engine",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"Engine"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"grade",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"Grade"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"version",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"Version"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"browser",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"Browser"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"id",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"ID"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"platform",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"Platform"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"keyField":"id"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
2021-12-24 11:05:02 +08:00
|
|
|
|
|
2021-12-31 17:33:11 +08:00
|
|
|
|
### 多选嵌套
|
2021-12-24 11:05:02 +08:00
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
嵌套模式下表格支持多选的同时支持级联选中。
|
2021-12-24 11:05:02 +08:00
|
|
|
|
|
2021-12-31 17:33:11 +08:00
|
|
|
|
```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":[
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type":"table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source":"$rows",
|
|
|
|
|
"columns":[
|
2023-10-12 19:07:38 +08:00
|
|
|
|
{
|
|
|
|
|
"name": "id",
|
|
|
|
|
"title": "ID"
|
|
|
|
|
},
|
2021-12-31 17:33:11 +08:00
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"engine",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"Engine"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"grade",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"Grade"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"version",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"Version"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"browser",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"Browser"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"id",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"ID"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"platform",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"Platform"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"keyField":"id",
|
|
|
|
|
"rowSelection":{
|
|
|
|
|
"type":"checkbox",
|
|
|
|
|
"keyField":"id"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### 单选嵌套
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
单选情况下,不同层级之间都是互斥选择。
|
2021-12-31 17:33:11 +08:00
|
|
|
|
|
|
|
|
|
```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":[
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type":"table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source":"$rows",
|
|
|
|
|
"columns":[
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"engine",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"Engine"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"grade",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"Grade"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"version",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"Version"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"browser",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"Browser"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"id",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"ID"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"platform",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"Platform"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"keyField":"id",
|
|
|
|
|
"rowSelection":{
|
|
|
|
|
"type":"radio",
|
|
|
|
|
"keyField":"id"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### 缩进设置
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
嵌套模式下可以通过`indentSize`来设置每一层级的缩进值。
|
|
|
|
|
|
2021-12-31 17:33:11 +08:00
|
|
|
|
```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":[
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type":"table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source":"$rows",
|
|
|
|
|
"columns":[
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"engine",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"Engine"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"grade",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"Grade"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"version",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"Version"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"browser",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"Browser"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"id",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"ID"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name":"platform",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title":"Platform"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"keyField":"id",
|
|
|
|
|
"rowSelection":{
|
|
|
|
|
"type":"checkbox",
|
|
|
|
|
"keyField":"id"
|
|
|
|
|
},
|
|
|
|
|
"indentSize": 20
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 列搜索
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
通过设置`column.searchable`为`true`快速开启列搜索功能。
|
|
|
|
|
|
2021-12-31 17:33:11 +08:00
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=6",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"width": 200
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"width": 200,
|
|
|
|
|
"searchable": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"width": 200,
|
|
|
|
|
"children": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Grade",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "grade",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"width": 200
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Badge",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "badgeText"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Platform",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "platform"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 粘性头部
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
设置`sticky`为`true`开启粘性头部。
|
|
|
|
|
|
2021-12-31 17:33:11 +08:00
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=6",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"title": "表格的标题",
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"width": 200
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"width": 200
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"width": 200,
|
|
|
|
|
"children": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Grade",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "grade",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"width": 200
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Badge",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "badgeText"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Platform",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "platform"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"sticky": true
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 表格尺寸
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
通过设置`size`属性来控制表格尺寸,支持`large`、`default`、`small`,`default`是中等尺寸。
|
2021-12-31 17:33:11 +08:00
|
|
|
|
|
|
|
|
|
### 最大尺寸
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
`large`是最大尺寸。
|
2021-12-31 17:33:11 +08:00
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=6",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"size": "large",
|
|
|
|
|
"rowSelection": {
|
|
|
|
|
"type": "checkbox",
|
|
|
|
|
"keyField": "id"
|
|
|
|
|
},
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"sorter": true,
|
|
|
|
|
"tpl": "${engine|truncate:5}"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"sorter": true,
|
|
|
|
|
"filterMultiple": true,
|
|
|
|
|
"filters": [
|
|
|
|
|
{
|
|
|
|
|
"text": "Joe",
|
|
|
|
|
"value": "Joe"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"text": "Jim",
|
|
|
|
|
"value": "Jim"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "tpl",
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"tpl": "${browser|truncate:5}",
|
|
|
|
|
"searchable": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Badge",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "badgeText"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Platform",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "platform"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"footSummary": [
|
|
|
|
|
{
|
|
|
|
|
"type": "text",
|
|
|
|
|
"text": "总计",
|
|
|
|
|
"fixed": "left"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "tpl",
|
|
|
|
|
"tpl": "测试测试",
|
|
|
|
|
"colSpan": 5
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### 默认尺寸
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
默认尺寸是`default`,即中等尺寸。
|
2021-12-31 17:33:11 +08:00
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=6",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"rowSelection": {
|
|
|
|
|
"type": "checkbox",
|
|
|
|
|
"keyField": "id"
|
|
|
|
|
},
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"sorter": true,
|
|
|
|
|
"tpl": "${engine|truncate:5}"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"sorter": true,
|
|
|
|
|
"filterMultiple": true,
|
|
|
|
|
"filters": [
|
|
|
|
|
{
|
|
|
|
|
"text": "Joe",
|
|
|
|
|
"value": "Joe"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"text": "Jim",
|
|
|
|
|
"value": "Jim"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "tpl",
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"tpl": "${engine|truncate:5}",
|
|
|
|
|
"searchable": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Badge",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "badgeText"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Platform",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "platform"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"footSummary": [
|
|
|
|
|
{
|
|
|
|
|
"type": "text",
|
|
|
|
|
"text": "总计",
|
|
|
|
|
"fixed": "left"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "tpl",
|
|
|
|
|
"tpl": "测试测试",
|
|
|
|
|
"colSpan": 5
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### 小尺寸
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
`size`设置为`small`是最小尺寸。
|
2021-12-31 17:33:11 +08:00
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=6",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"size": "small",
|
|
|
|
|
"rowSelection": {
|
|
|
|
|
"type": "checkbox",
|
|
|
|
|
"keyField": "id"
|
|
|
|
|
},
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"sorter": true,
|
|
|
|
|
"tpl": "${engine|truncate:5}"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"sorter": true,
|
|
|
|
|
"filterMultiple": true,
|
|
|
|
|
"filters": [
|
|
|
|
|
{
|
|
|
|
|
"text": "Joe",
|
|
|
|
|
"value": "Joe"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"text": "Jim",
|
|
|
|
|
"value": "Jim"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "tpl",
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"tpl": "${engine|truncate:5}",
|
|
|
|
|
"searchable": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Badge",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "badgeText"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Platform",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "platform"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"footSummary": [
|
|
|
|
|
{
|
|
|
|
|
"type": "text",
|
|
|
|
|
"text": "总计",
|
|
|
|
|
"fixed": "left"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "tpl",
|
|
|
|
|
"tpl": "测试测试",
|
|
|
|
|
"colSpan": 5
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 可复制
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
给列配置`copyable`属性即可开启列内容复制功能。
|
|
|
|
|
|
2021-12-31 17:33:11 +08:00
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=6",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"title": "表格的标题",
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"width": 200
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"copyable": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"width": 200
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Badge",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "badgeText"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Platform",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "platform"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 弹出框
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
可以给列配置上`popOver`属性,默认会在该列内容区里渲染一个图标,点击会显示弹出框,用于展示全部内容。
|
2021-12-31 17:33:11 +08:00
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=6",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"copyable": true,
|
|
|
|
|
"popOver": {
|
|
|
|
|
"body": {
|
|
|
|
|
"type": "tpl",
|
|
|
|
|
"tpl": "详细信息:${browser}"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Badge",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "badgeText"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Platform",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "platform"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
也可以设置图标不展示,结合`truncate`实现内容自动省略,其余可点击/悬浮查看更多。
|
2021-12-31 17:33:11 +08:00
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=6",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "tpl",
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"tpl": "${engine|truncate:5}",
|
|
|
|
|
"popOver": {
|
|
|
|
|
"trigger": "hover",
|
|
|
|
|
"position": "left-top",
|
|
|
|
|
"showIcon": false,
|
|
|
|
|
"body": {
|
|
|
|
|
"type": "tpl",
|
|
|
|
|
"tpl": "${browser}"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Badge",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "badgeText"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Platform",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "platform"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
可以给列配置`popOverEnableOn`属性,该属性为表达式,来控制当前行是否启动`popOver`功能。
|
2021-12-31 17:33:11 +08:00
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=6",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "ID",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "id",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"popOver": {
|
|
|
|
|
"body": {
|
|
|
|
|
"type": "tpl",
|
|
|
|
|
"tpl": "${id}"
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
"popOverEnableOn": "this.id == 1"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"popOver": {
|
|
|
|
|
"body": {
|
|
|
|
|
"type": "tpl",
|
|
|
|
|
"tpl": "${browser}"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Badge",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "badgeText"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Platform",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "platform"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 行角标
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
通过属性`itemBadge`,可以为表格行配置[角标](./badge),可以使用[数据映射](../../../docs/concepts/data-mapping)为每一行添加特定的 Badge 属性。[`visibleOn`](../../../docs/concepts/expression)属性控制显示的条件,表达式中`this`可以取到行所在上下文的数据,比如行数据中有`badgeText`字段才显示角标,可以设置`"visibleOn": "this.badgeText"`。
|
2021-12-31 17:33:11 +08:00
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"body": {
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source": "${table}",
|
|
|
|
|
"syncLocation": false,
|
|
|
|
|
"showBadge": true,
|
|
|
|
|
"itemBadge": {
|
|
|
|
|
"text": "${badgeText}",
|
|
|
|
|
"mode": "ribbon",
|
|
|
|
|
"position": "top-left",
|
|
|
|
|
"level": "${badgeLevel}",
|
|
|
|
|
"visibleOn": "this.badgeText"
|
|
|
|
|
},
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "id",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title": "ID",
|
|
|
|
|
"searchable": {
|
|
|
|
|
"type": "input-text",
|
|
|
|
|
"name": "id",
|
|
|
|
|
"label": "主键",
|
|
|
|
|
"placeholder": "输入id",
|
|
|
|
|
"size": "sm",
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title": "Rendering engine"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title": "Browser",
|
|
|
|
|
"searchable": {
|
|
|
|
|
"type": "select",
|
|
|
|
|
"name": "browser",
|
|
|
|
|
"label": "浏览器",
|
|
|
|
|
"placeholder": "选择浏览器",
|
|
|
|
|
"size": "sm",
|
|
|
|
|
"options": [
|
|
|
|
|
{
|
|
|
|
|
"label": "Internet Explorer ",
|
|
|
|
|
"value": "ie"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "AOL browser",
|
|
|
|
|
"value": "aol"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "Firefox",
|
|
|
|
|
"value": "firefox"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "platform",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title": "Platform(s)"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title": "Engine version",
|
|
|
|
|
"searchable": {
|
|
|
|
|
"type": "input-number",
|
|
|
|
|
"name": "version",
|
|
|
|
|
"label": "版本号",
|
|
|
|
|
"placeholder": "输入版本号",
|
|
|
|
|
"size": "sm",
|
|
|
|
|
"mode": "horizontal"
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "grade",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title": "CSS grade"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
data: {
|
|
|
|
|
table: [
|
|
|
|
|
{
|
|
|
|
|
"id": 1,
|
|
|
|
|
"engine": "Trident",
|
|
|
|
|
"browser": "Internet Explorer 4.0",
|
|
|
|
|
"platform": "Win 95+",
|
|
|
|
|
"version": "4",
|
|
|
|
|
"grade": "X",
|
|
|
|
|
"badgeText": "默认",
|
|
|
|
|
"badgeLevel": "info"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": 2,
|
|
|
|
|
"engine": "Trident",
|
|
|
|
|
"browser": "Internet Explorer 5.0",
|
|
|
|
|
"platform": "Win 95+",
|
|
|
|
|
"version": "5",
|
|
|
|
|
"grade": "C",
|
|
|
|
|
"badgeText": "危险",
|
|
|
|
|
"badgeLevel": "danger"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": 3,
|
|
|
|
|
"engine": "Trident",
|
|
|
|
|
"browser": "Internet Explorer 5.5",
|
|
|
|
|
"platform": "Win 95+",
|
|
|
|
|
"version": "5.5",
|
|
|
|
|
"grade": "A"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": 4,
|
|
|
|
|
"engine": "Trident",
|
|
|
|
|
"browser": "Internet Explorer 6",
|
|
|
|
|
"platform": "Win 98+",
|
|
|
|
|
"version": "6",
|
|
|
|
|
"grade": "A"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": 5,
|
|
|
|
|
"engine": "Trident",
|
|
|
|
|
"browser": "Internet Explorer 7",
|
|
|
|
|
"platform": "Win XP SP2+",
|
|
|
|
|
"version": "7",
|
|
|
|
|
"grade": "A"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 表头提示
|
|
|
|
|
|
|
|
|
|
通过设置列属性`remark`,可为每一列的表头增加提示信息。
|
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "page",
|
|
|
|
|
"body": {
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=5",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"remark": "表头提示"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Badge",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "badgeText"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Grade",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "grade"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Platform",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "platform"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 快速编辑
|
|
|
|
|
|
2022-08-15 19:20:26 +08:00
|
|
|
|
可以通过给列配置:`"quickEdit": true`,Table 配置:`quickSaveApi`,可以实现表格内快速编辑并批量保存的功能。
|
2021-12-31 17:33:11 +08:00
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "page",
|
|
|
|
|
"body": {
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=5",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"quickSaveApi": {
|
|
|
|
|
"url": "/api/mock2/sample/bulkUpdate",
|
|
|
|
|
"method": "put"
|
|
|
|
|
},
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"quickEdit": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Badge",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "badgeText"
|
2021-12-31 17:33:11 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
#### 指定编辑表单项类型
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
`quickEdit`也可以配置对象形式,可以指定编辑表单项的类型,例如`"type": "select"`。
|
2021-12-31 17:33:11 +08:00
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "page",
|
|
|
|
|
"body": {
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=5",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"quickSaveApi": {
|
|
|
|
|
"url": "/api/mock2/sample/bulkUpdate",
|
|
|
|
|
"method": "put"
|
|
|
|
|
},
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "id",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title": "ID"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "grade",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title": "CSS grade",
|
|
|
|
|
"quickEdit": {
|
|
|
|
|
"type": "select",
|
|
|
|
|
"options": [
|
|
|
|
|
"A",
|
|
|
|
|
"B",
|
|
|
|
|
"C",
|
|
|
|
|
"D",
|
|
|
|
|
"X"
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
#### 快速编辑多个表单项
|
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "page",
|
|
|
|
|
"body": {
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=5",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"quickSaveApi": {
|
|
|
|
|
"url": "/api/mock2/sample/bulkUpdate",
|
|
|
|
|
"method": "put"
|
|
|
|
|
},
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "id",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title": "ID"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "grade",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title": "CSS grade",
|
|
|
|
|
"quickEdit": {
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
|
|
|
|
"type": "select",
|
|
|
|
|
"name": "grade",
|
|
|
|
|
"options": [
|
|
|
|
|
"A",
|
|
|
|
|
"B",
|
|
|
|
|
"C",
|
|
|
|
|
"D",
|
|
|
|
|
"X"
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
"label": "id",
|
|
|
|
|
"type": "input-text",
|
|
|
|
|
"name": "id"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
#### 内联模式
|
|
|
|
|
|
|
|
|
|
配置`quickEdit`的`mode`为`inline`。可以直接将编辑表单项渲染至表格内,可以直接操作编辑。
|
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "page",
|
|
|
|
|
"body": {
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=5",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"quickSaveApi": {
|
|
|
|
|
"url": "/api/mock2/sample/bulkUpdate",
|
|
|
|
|
"method": "put"
|
|
|
|
|
},
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "id",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title": "ID"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "grade",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title": "CSS grade",
|
|
|
|
|
"quickEdit": {
|
|
|
|
|
"mode": "inline",
|
|
|
|
|
"type": "select",
|
|
|
|
|
"size": "xs",
|
|
|
|
|
"options": [
|
|
|
|
|
"A",
|
|
|
|
|
"B",
|
|
|
|
|
"C",
|
|
|
|
|
"D",
|
|
|
|
|
"X"
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "switch",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title": "switch",
|
|
|
|
|
"quickEdit": {
|
|
|
|
|
"mode": "inline",
|
|
|
|
|
"type": "switch",
|
|
|
|
|
"onText": "开启",
|
|
|
|
|
"offText": "关闭"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
#### 即时保存
|
|
|
|
|
|
|
|
|
|
如果想编辑完表单项之后,不想点击顶部确认按钮来进行保存,而是即时保存当前标记的数据,则需要配置 `quickEdit` 中的 `"saveImmediately": true`,然后配置接口`quickSaveItemApi`,可以直接将编辑表单项渲染至表格内操作。
|
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "page",
|
|
|
|
|
"body": {
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=5",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"quickSaveItemApi": {
|
|
|
|
|
"url": "/api/mock2/sample/$id",
|
|
|
|
|
"method": "put"
|
|
|
|
|
},
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "id",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title": "ID"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "grade",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title": "CSS grade",
|
|
|
|
|
"quickEdit": {
|
|
|
|
|
"mode": "inline",
|
|
|
|
|
"type": "select",
|
|
|
|
|
"size": "xs",
|
|
|
|
|
"options": [
|
|
|
|
|
"A",
|
|
|
|
|
"B",
|
|
|
|
|
"C",
|
|
|
|
|
"D",
|
|
|
|
|
"X"
|
|
|
|
|
],
|
|
|
|
|
"saveImmediately": true
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "switch",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title": "switch",
|
|
|
|
|
"quickEdit": {
|
|
|
|
|
"mode": "inline",
|
|
|
|
|
"type": "switch",
|
|
|
|
|
"onText": "开启",
|
|
|
|
|
"offText": "关闭",
|
|
|
|
|
"saveImmediately": true
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
你也可以在`saveImmediately`中配置 api,实现即时保存。
|
2021-12-31 17:33:11 +08:00
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "page",
|
|
|
|
|
"body": {
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=5",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "id",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title": "ID"
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "grade",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title": "CSS grade",
|
|
|
|
|
"quickEdit": {
|
|
|
|
|
"mode": "inline",
|
|
|
|
|
"type": "select",
|
|
|
|
|
"size": "xs",
|
|
|
|
|
"options": [
|
|
|
|
|
"A",
|
|
|
|
|
"B",
|
|
|
|
|
"C",
|
|
|
|
|
"D",
|
|
|
|
|
"X"
|
|
|
|
|
],
|
|
|
|
|
"saveImmediately": {
|
|
|
|
|
"api": "/api/mock2/sample/$id"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "grade",
|
2021-12-31 17:33:11 +08:00
|
|
|
|
"title": "CSS grade",
|
|
|
|
|
"quickEdit": {
|
|
|
|
|
"mode": "inline",
|
|
|
|
|
"type": "switch",
|
|
|
|
|
"onText": "开启",
|
|
|
|
|
"offText": "关闭",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"saveImmediately": {
|
|
|
|
|
"api": "/api/mock2/sample/$id"
|
|
|
|
|
}
|
2021-12-31 17:33:11 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-05-10 20:16:35 +08:00
|
|
|
|
## 列样式
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
可以通过设置`columns`中的`className`控制整列样式。
|
2022-05-10 20:16:35 +08:00
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=5",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2022-05-10 20:16:35 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine"
|
2022-05-10 20:16:35 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version",
|
2022-05-10 20:16:35 +08:00
|
|
|
|
"className": "text-primary"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser"
|
2022-05-10 20:16:35 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Operation",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "operation",
|
2022-05-10 20:16:35 +08:00
|
|
|
|
"type": "button",
|
|
|
|
|
"label": "删除",
|
|
|
|
|
"size": "sm"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
也可以通过`titleClassName`单独控制表头对应单元格的样式。
|
2022-05-10 20:16:35 +08:00
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=5",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2022-05-10 20:16:35 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine"
|
2022-05-10 20:16:35 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version",
|
2022-05-10 20:16:35 +08:00
|
|
|
|
"className": "text-primary",
|
|
|
|
|
"titleClassName": "font-bold"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser"
|
2022-05-10 20:16:35 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Operation",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "operation",
|
2022-05-10 20:16:35 +08:00
|
|
|
|
"type": "button",
|
|
|
|
|
"label": "删除",
|
|
|
|
|
"size": "sm"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 单元格样式
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
可以通过设置`columns`的`classNameExpr`,根据数据动态添加单元格 CSS 类,支持模版语法。
|
2022-05-10 20:16:35 +08:00
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=5",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2022-05-10 20:16:35 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine"
|
2022-05-10 20:16:35 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version",
|
2022-05-10 20:16:35 +08:00
|
|
|
|
"classNameExpr": "<%= data.version > 5 ? 'text-danger' : '' %>"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Browser",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "browser"
|
2022-05-10 20:16:35 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Operation",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "operation",
|
2022-05-10 20:16:35 +08:00
|
|
|
|
"type": "button",
|
|
|
|
|
"label": "删除",
|
|
|
|
|
"size": "sm"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 行操作按钮
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
通过设置`itemActions`可以设置鼠标移动到行上出现操作按钮。
|
2022-05-10 20:16:35 +08:00
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=5",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2022-05-10 20:16:35 +08:00
|
|
|
|
"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",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine"
|
2022-05-10 20:16:35 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version"
|
2022-05-10 20:16:35 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2023-11-02 19:33:30 +08:00
|
|
|
|
固定表头情况下,展示行操作按钮。
|
2022-05-10 20:16:35 +08:00
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "service",
|
|
|
|
|
"api": "/api/sample?perPage=20",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"type": "table2",
|
2022-05-10 20:16:35 +08:00
|
|
|
|
"source": "$rows",
|
|
|
|
|
"itemActions": [
|
|
|
|
|
{
|
|
|
|
|
"label": "编辑",
|
|
|
|
|
"type": "button",
|
|
|
|
|
"actionType": "dialog",
|
|
|
|
|
"dialog": {
|
|
|
|
|
"title": "编辑",
|
|
|
|
|
"body": "这是个简单的编辑弹框"
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "删除",
|
|
|
|
|
"type": "button",
|
|
|
|
|
"actionType": "ajax",
|
|
|
|
|
"confirmText": "确认要删除?",
|
|
|
|
|
"api": "/api/mock2/form/saveForm"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"scroll": {
|
|
|
|
|
"y": 100
|
|
|
|
|
},
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"title": "Engine",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "engine"
|
2022-05-10 20:16:35 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Version",
|
2022-08-15 19:20:26 +08:00
|
|
|
|
"name": "version"
|
2022-05-10 20:16:35 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
2021-12-31 17:33:11 +08:00
|
|
|
|
|
|
|
|
|
## 属性表
|
|
|
|
|
|
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ---------------- | ---------------------------------------- | ------------------------- | ------------------------------------------------------------------------- |
|
|
|
|
|
| type | `string` | | `"type"` 指定为 table 渲染器 |
|
|
|
|
|
| title | `string` | | 标题 |
|
|
|
|
|
| source | `string` | `${items}` | 数据源, 绑定当前环境变量 |
|
2022-08-15 19:20:26 +08:00
|
|
|
|
| sticky | `boolean` | `false` | 是否粘性头部 |
|
|
|
|
|
| footer | `string` \| `Schema` | | 表格尾部 |
|
|
|
|
|
| loading | `boolean` | | 表格是否加载中 |
|
2021-12-31 17:33:11 +08:00
|
|
|
|
| columnsTogglable | `auto` 或者 `boolean` | `auto` | 展示列显示开关, 自动即:列数量大于或等于 5 个时自动开启 |
|
2022-08-15 19:20:26 +08:00
|
|
|
|
| placeholder | `string` \| `Schema` | `暂无数据` | 当没数据的时候的文字提示 |
|
|
|
|
|
| rowSelection | `rowSelection` | | 行相关配置 |
|
|
|
|
|
| rowClassNameExpr | `string` | | 行 CSS 类名,支持模版语法 |
|
|
|
|
|
| expandable | `Expandable` | | 展开行配置 |
|
|
|
|
|
| lineHeight | `large` \| `middle` | | 行高设置 |
|
2021-12-31 17:33:11 +08:00
|
|
|
|
| footerClassName | `string` | `Action.md-table-footer` | 底部外层 CSS 类名 |
|
|
|
|
|
| toolbarClassName | `string` | `Action.md-table-toolbar` | 工具栏 CSS 类名 |
|
|
|
|
|
| columns | `Array<Column>` | | 用来设置列信息 |
|
|
|
|
|
| combineNum | `number` | | 自动合并单元格 |
|
|
|
|
|
| itemActions | Array<[Action](./action-button)> | | 悬浮行操作按钮组 |
|
|
|
|
|
| itemCheckableOn | [表达式](../../docs/concepts/expression) | | 配置当前行是否可勾选的条件,要用 [表达式](../../docs/concepts/expression) |
|
|
|
|
|
| itemDraggableOn | [表达式](../../docs/concepts/expression) | | 配置当前行是否可拖拽的条件,要用 [表达式](../../docs/concepts/expression) |
|
|
|
|
|
| checkOnItemClick | `boolean` | `false` | 点击数据行是否可以勾选当前行 |
|
2021-12-24 11:05:02 +08:00
|
|
|
|
| rowClassName | `string` | | 给行添加 CSS 类名 |
|
|
|
|
|
| rowClassNameExpr | [模板](../../docs/concepts/template) | | 通过模板给行添加 CSS 类名 |
|
|
|
|
|
| prefixRow | `Array` | | 顶部总结行 |
|
|
|
|
|
| affixRow | `Array` | | 底部总结行 |
|
|
|
|
|
| itemBadge | [`BadgeSchema`](./badge) | | 行角标配置 |
|
|
|
|
|
| autoFillHeight | `boolean` | | 内容区域自适应高度 |
|
|
|
|
|
|
2021-12-31 17:33:11 +08:00
|
|
|
|
## 行配置属性表
|
|
|
|
|
|
2022-08-15 19:20:26 +08:00
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ------------------- | ---------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------ |
|
|
|
|
|
| type | `checkbox` \| `radio` | `checkbox` | 指定单选还是多选 |
|
|
|
|
|
| fixed | `boolean` | | 选择列是否固定,只能左侧固定 |
|
|
|
|
|
| keyField | `string` | `key` | 对应数据源的 key 值,默认是`key`,可指定为`id`、`shortId`等 |
|
|
|
|
|
| disableOn | `string` | | 当前行是否可选择条件,要用 [表达式](../../docs/concepts/expression) |
|
|
|
|
|
| selections | `selections` | | 自定义筛选菜单,内置`all`(全选)、`invert`(反选)、`none`(取消选择)、`odd`(选择奇数项)、`even`(选择偶数项) |
|
|
|
|
|
| selectedRowKeys | `Array<string>` \| `Array<number>` | | 已选择项 |
|
|
|
|
|
| selectedRowKeysExpr | `string` | | 已选择项正则表达式 |
|
|
|
|
|
| columnWidth | `number` | | 自定义选择列列宽 |
|
|
|
|
|
| rowClick | `boolean` | | 单条任意区域选中 |
|
2021-12-31 17:33:11 +08:00
|
|
|
|
|
|
|
|
|
### 选择菜单配置属性表
|
|
|
|
|
|
2022-08-15 19:20:26 +08:00
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ------ | ---------------------------------------------- | ------ | ---------------------------------------------------------- |
|
|
|
|
|
| key | `all` \| `invert` \| `none` \| `odd` \| `even` | `all` | 菜单类型,内置全选、反选、取消选择、选择奇数项、选择偶数项 |
|
|
|
|
|
| text | `string` | | 自定义菜单项文本 |
|
2021-12-31 17:33:11 +08:00
|
|
|
|
|
|
|
|
|
## 展开行配置属性表
|
|
|
|
|
|
2022-08-15 19:20:26 +08:00
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ------------------- | ---------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------ |
|
|
|
|
|
| expandableOn | `string` | | 指定可展开的行,要用 [表达式](../../docs/concepts/expression) |
|
|
|
|
|
| keyField | `string` | `key` | 对应数据源的 key 值,默认是`key`,可指定为`id`、`shortId`等 |
|
|
|
|
|
| disableOn | `string` | | 当前行是否可选择条件,要用 [表达式](../../docs/concepts/expression) |
|
|
|
|
|
| selections | `selections` | | 自定义筛选菜单,内置`all`(全选)、`invert`(反选)、`none`(取消选择)、`odd`(选择奇数项)、`even`(选择偶数项) |
|
|
|
|
|
| selectedRowKeys | `Array<string>` \| `Array<number>` | | 已选择项 |
|
|
|
|
|
| selectedRowKeysExpr | `string` | | 已选择项正则表达式 |
|
|
|
|
|
| columnWidth | `number` | | 自定义选择列列宽 |
|
2021-12-31 17:33:11 +08:00
|
|
|
|
|
2021-12-24 11:05:02 +08:00
|
|
|
|
## 列配置属性表
|
|
|
|
|
|
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ---------- | --------------------------------------------- | ------- | ---------------- |
|
|
|
|
|
| label | [模板](../../docs/concepts/template) | | 表头文本内容 |
|
|
|
|
|
| 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 | | | 提示信息 |
|