test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-16 01:40:53 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
52f507a03a
amis/docs/zh-CN/components/table-v2.md

3561 lines
106 KiB
Markdown
Raw Normal View History

feat: Table原子组件
2021-12-24 11:05:02 +08:00
---
title: Table v2 表格
description:
type: 0
group: ⚙ 组件
menuName: Table 表格
icon:
order: 67
---
表格展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`Service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。
## 基本用法
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=5",
"body": [
{
"type": "table-v2",
"title": "表格标题",
"source": "$rows",
"columns": [
{
"title": "Engine",
"key": "engine"
},
{
"title": "Version",
"key": "version"
},
{
"title": "Browser",
"key": "browser"
},
{
"title": "Operation",
"key": "operation",
"type": "button",
"label": "删除",
"size": "sm"
}
],
"footer": "表格Footer"
}
]
}
```
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
## 可选择
支持单选、多选
### 多选
feat: Table原子组件
2021-12-24 11:05:02 +08:00
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=5",
"body": [
{
"type": "table-v2",
"source": "$rows",
"rowSelection": {
"type": "checkbox",
"keyField": "id"
},
"columns": [
{
"title": "Engine",
"key": "engine"
},
{
"title": "Version",
"key": "version"
},
{
"title": "Browser",
"key": "browser"
},
{
"title": "Operation",
"key": "operation",
"type": "button",
"label": "删除",
"size": "sm"
}
]
}
]
}
```
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
### 点击整行选择
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=5",
"body": [
{
"type": "table-v2",
"source": "$rows",
"rowSelection": {
"type": "checkbox",
"keyField": "id",
"rowClick": true
},
"columns": [
{
"title": "Engine",
"key": "engine"
},
{
"title": "Version",
"key": "version"
},
{
"title": "Browser",
"key": "browser"
},
{
"title": "Operation",
"key": "operation",
"type": "button",
"label": "删除",
"size": "sm"
}
]
}
]
}
```
### 已选择
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=5",
"body": [
{
"type": "table-v2",
"source": "$rows",
"rowSelection": {
"type": "checkbox",
"keyField": "id",
"selectedRowKeys": [1, 2]
},
"columns": [
{
"title": "ID",
"key": "id"
},
{
"title": "Engine",
"key": "engine"
},
{
"title": "Version",
"key": "version"
},
{
"title": "Browser",
"key": "browser"
},
{
"title": "Operation",
"key": "operation",
"type": "button",
"label": "删除",
"size": "sm"
}
]
}
]
}
```
### 已选择 - 正则表达式
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=5",
"body": [
{
"type": "table-v2",
"source": "$rows",
"rowSelection": {
"type": "checkbox",
"keyField": "id",
fix: Table2事件动作调整
2022-05-23 14:32:52 +08:00
"selectedRowKeysExpr": "data.record.id === 1"
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
},
"columns": [
{
"title": "ID",
"key": "id"
},
{
"title": "Engine",
"key": "engine"
},
{
"title": "Version",
"key": "version"
},
{
"title": "Browser",
"key": "browser"
},
{
"title": "Operation",
"key": "operation",
"type": "button",
"label": "删除",
"size": "sm"
}
]
}
]
}
```
### 单选
可通过`disableOn`来控制哪一行不可选，不可选情况下会有禁用样式，但如果行内如果有除文字外的其他组件，禁用样式需要自行控制
feat: Table原子组件
2021-12-24 11:05:02 +08:00
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=5",
"body": [
{
"type": "table-v2",
"source": "$rows",
"rowSelection": {
"type": "radio",
"keyField": "id",
"disableOn": "this.record.id === 1"
},
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
"columns": [
{
"title": "Engine",
"key": "engine"
},
{
"title": "Version",
"key": "version"
},
{
"title": "Browser",
"key": "browser"
}
]
}
]
}
```
### 自定义选择菜单
内置全选`all`、反选`invert`、清空`none`、选中奇数行`odd`、选中偶数行`even`，存在禁止选择的行，不参与计算奇偶数
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=5",
"body": [
{
"type": "table-v2",
"source": "$rows",
"rowSelection": {
"type": "checkbox",
"keyField": "id",
"selections": [
{
"key": "all",
"text": "全选所有"
},
{
"key": "invert",
"text": "反选当页"
},
{
"key": "none",
"text": "清空所有"
},
{
"key": "odd",
"text": "选择奇数行"
},
{
"key": "even",
"text": "选择偶数行"
}
]
},
feat: Table原子组件
2021-12-24 11:05:02 +08:00
"columns": [
{
"title": "Engine",
"key": "engine"
},
{
"title": "Version",
"key": "version"
},
{
"title": "Browser",
"key": "browser"
},
{
"title": "Operation",
"key": "operation",
"type": "button",
"label": "删除",
"size": "sm"
}
]
}
]
}
```
## 筛选和排序
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=5",
"body": [
{
"type": "table-v2",
"source": "$rows",
"columns": [
{
"title": "Engine",
"key": "engine",
"sorter": true,
"filterMultiple": true,
"filters": [
{
"text": "Joe",
"value": "Joe"
},
{
"text": "Jim",
"value": "Jim"
}
]
},
{
"title": "Version",
"key": "version",
"sorter": true,
"width": 100
},
{
"title": "Browser",
"key": "browser",
"filters": [
{
"text": "Joe",
"value": "Joe"
},
{
"text": "Jim",
"value": "Jim"
}
]
}
]
}
]
}
```
## 带边框
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=5",
"body": [
{
"type": "table-v2",
"source": "$rows",
"bordered": true,
"title": "标题",
"footer": "Footer",
"columns": [
{
"title": "Engine",
"key": "engine"
},
{
"title": "Version",
"key": "version"
},
{
"title": "Browser",
"key": "browser"
},
{
"title": "Operation",
"key": "operation",
"type": "button",
"label": "删除",
"size": "sm"
}
]
}
]
}
```
## 可展开
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=5",
"body": [
{
"type": "table-v2",
"source": "$rows",
"columns": [
{
"title": "Engine",
"key": "engine"
},
{
"title": "Version",
"key": "version"
},
{
"title": "Browser",
"key": "browser"
},
{
"title": "Operation",
"key": "operation",
"type": "button",
"label": "删除",
"size": "sm"
}
],
"expandable": {
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
"expandableOn": "this.record.id === 1 || this.record.id === 3",
feat: Table原子组件
2021-12-24 11:05:02 +08:00
"keyField": "id",
"expandedRowClassNameExpr": "<%= data.rowIndex % 2 ? 'bg-success' : '' %>",
"expandedRowKeys": ["3"]
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
},
"expandableBody": [
{
"type": "tpl",
"html": "<div class=\"test\">测试测试</div>"
}
]
}
]
}
```
## 已展开 - 正则表达式
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=5",
"body": [
{
"type": "table-v2",
"source": "$rows",
"columns": [
{
"title": "Engine",
"key": "engine"
},
{
"title": "Version",
"key": "version"
},
{
"title": "Browser",
"key": "browser"
},
{
"title": "Operation",
"key": "operation",
"type": "button",
"label": "删除",
"size": "sm"
}
],
"expandable": {
"expandableOn": "this.record.id === 1 || this.record.id === 3",
"keyField": "id",
"expandedRowClassNameExpr": "<%= data.rowIndex % 2 ? 'bg-success' : '' %>",
fix: Table2事件动作调整
2022-05-23 14:32:52 +08:00
"expandedRowKeysExpr": "data.record.id == '3'"
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
},
"expandableBody": [
{
"type": "tpl",
"html": "<div class=\"test\">测试测试</div>"
}
]
feat: Table原子组件
2021-12-24 11:05:02 +08:00
}
]
}
```
## 表格行/列合并
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=10",
"body": [
{
"type": "table-v2",
"source": "$rows",
"columns": [
{
"title": "Engine",
"key": "engine"
},
{
"title": "Version",
"key": "version",
"rowSpanExpr": "<%= data.rowIndex === 2 ? 2 : 0 %>"
},
{
"title": "Browser",
"key": "browser"
},
{
"title": "Badge",
"key": "badgeText",
"colSpanExpr": "<%= data.rowIndex === 6 ? 3 : 0 %>"
},
{
"title": "Grade",
"key": "grade"
},
{
"title": "Platform",
"key": "platform"
}
]
}
]
}
```
## 固定表头
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=10",
"body": [
{
"type": "table-v2",
"source": "$rows",
"scroll": {"y" : 200},
"columns": [
{
"title": "Engine",
"key": "engine"
},
{
"title": "Grade",
"key": "grade"
},
{
"title": "Platform",
"key": "platform"
}
]
}
]
}
```
## 固定列
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=6",
"body": [
{
"type": "table-v2",
"source": "$rows",
"scroll": {"x": 1000},
"columns": [
{
"title": "Engine",
"key": "engine",
"fixed": "left",
"width": 100
},
{
"title": "Version",
"key": "version",
"fixed": "left",
"width": 100
},
{
"title": "Browser",
"key": "browser"
},
{
"title": "Badge",
"key": "badgeText"
},
{
"title": "Grade",
"key": "grade"
},
{
"title": "Platform",
"key": "platform",
"fixed": "right"
}
]
}
]
}
```
## 固定头和列
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=10",
"body": [
{
"type": "table-v2",
"source": "$rows",
"scroll": {"x": 1000, "y": 200},
"columns": [
{
"title": "Engine",
"key": "engine",
"fixed": "left",
"width": 100
},
{
"title": "Version",
"key": "version",
"fixed": "left",
"width": 100
},
{
"title": "Browser",
"key": "browser"
},
{
"title": "Badge",
"key": "badgeText"
},
{
"title": "Grade",
"key": "grade"
},
{
"title": "Platform",
"key": "platform",
"fixed": "right"
}
]
}
]
}
```
## 表头分组
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=10",
"body": [
{
"type": "table-v2",
"source": "$rows",
"scroll": {"y": 200},
"columns": [
{
"title": "Engine",
"key": "engine",
},
{
"title": "Version",
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
"key": "version"
feat: Table原子组件
2021-12-24 11:05:02 +08:00
},
{
"title": "Grade",
"key": "grade"
},
{
"title": "Grade1",
"key": "grade1",
"children": [
{
"title": "Browser",
"key": "browser"
},
{
"title": "Badge",
"key": "badgeText",
"children": [
{
"title": "ID",
"key": "id"
}
]
}
]
},
{
"title": "Platform",
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
"key": "platform"
feat: Table原子组件
2021-12-24 11:05:02 +08:00
}
]
}
]
}
```
```schema: scope="body"
{
"type": "service",
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
"api": "/api/sample?perPage=10",
feat: Table原子组件
2021-12-24 11:05:02 +08:00
"body": [
{
"type": "table-v2",
"source": "$rows",
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
"scroll": {"y": 200},
feat: Table原子组件
2021-12-24 11:05:02 +08:00
"columns": [
{
"title": "Engine",
"key": "engine",
},
{
"title": "Version",
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
"key": "version"
feat: Table原子组件
2021-12-24 11:05:02 +08:00
},
{
"title": "Grade",
"key": "grade"
},
{
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
"title": "Grade1",
"key": "grade1",
feat: Table原子组件
2021-12-24 11:05:02 +08:00
"children": [
{
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
"title": "Browser",
"key": "browser"
feat: Table原子组件
2021-12-24 11:05:02 +08:00
}
]
},
{
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
"title": "Platform1",
"key": "platform1",
"children": [
{
"title": "Badge1",
"key": "badgeText1",
"children": [
{
"title": "ID",
"key": "id"
},
{
"title": "Platform",
"key": "platform"
},
{
"title": "Badge",
"key": "badgeText"
}
]
}
]
feat: Table原子组件
2021-12-24 11:05:02 +08:00
}
]
}
]
}
```
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
## 拖拽排序
支持手动拖动排序
### 默认拖拽排序
feat: Table原子组件
2021-12-24 11:05:02 +08:00
```schema: scope="body"
{
"type": "service",
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
"api": "/api/sample?perPage=5",
feat: Table原子组件
2021-12-24 11:05:02 +08:00
"body": [
{
"type": "table-v2",
"source": "$rows",
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
"draggable": true,
fix: Table2事件动作调整
2022-05-23 14:32:52 +08:00
"keyField": "id",
feat: Table原子组件
2021-12-24 11:05:02 +08:00
"columns": [
{
fix: Table2事件动作调整
2022-05-23 14:32:52 +08:00
"title": "ID",
"key": "id"
feat: Table原子组件
2021-12-24 11:05:02 +08:00
},
{
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
"title": "Grade",
"key": "grade"
},
{
"title": "Browser",
"key": "browser"
},
{
"title": "Badge",
"key": "badgeText",
"children": [
{
fix: Table2事件动作调整
2022-05-23 14:32:52 +08:00
"title": "Engine",
"key": "engine",
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
}
]
},
{
"title": "Platform",
"key": "platform"
}
]
}
]
}
```
### 嵌套拖拽排序
数据源嵌套情况下，仅允许同层级之间排序
```schema: scope="body"
{
"type":"page",
"body":{
"type":"service",
"data":{
"rows":[
{
"engine":"Trident",
"browser":"Internet Explorer 4.0",
"platform":"Win 95+",
"version":"4",
"grade":"X",
"id":1,
"children":[
{
"engine":"Trident",
"browser":"Internet Explorer 4.0",
"platform":"Win 95+",
"version":"4",
"grade":"X",
"id":1001,
"children":[
{
"engine":"Trident",
"browser":"Internet Explorer 4.0",
"platform":"Win 95+",
"version":"4",
"grade":"X",
"id":10001
},
{
"engine":"Trident",
"browser":"Internet Explorer 5.0",
"platform":"Win 95+",
"version":"5",
"grade":"C",
"id":10002
}
]
},
{
"engine":"Trident",
"browser":"Internet Explorer 5.0",
"platform":"Win 95+",
"version":"5",
"grade":"C",
"id":1002
}
]
},
{
"engine":"Trident",
"browser":"Internet Explorer 5.0",
"platform":"Win 95+",
"version":"5",
"grade":"C",
"id":2,
"children":[
{
"engine":"Trident",
"browser":"Internet Explorer 4.0",
"platform":"Win 95+",
"version":"4",
"grade":"X",
"id":2001
},
{
"engine":"Trident",
"browser":"Internet Explorer 5.0",
"platform":"Win 95+",
"version":"5",
"grade":"C",
"id":2002
}
]
},
{
"engine":"Trident",
"browser":"Internet Explorer 5.5",
"platform":"Win 95+",
"version":"5.5",
"grade":"A",
"id":3,
"children":[
{
"engine":"Trident",
"browser":"Internet Explorer 4.0",
"platform":"Win 95+",
"version":"4",
"grade":"X",
"id":3001
},
{
"engine":"Trident",
"browser":"Internet Explorer 5.0",
"platform":"Win 95+",
"version":"5",
"grade":"C",
"id":3002
}
]
},
{
"engine":"Trident",
"browser":"Internet Explorer 6",
"platform":"Win 98+",
"version":"6",
"grade":"A",
"id":4,
"children":[
{
"engine":"Trident",
"browser":"Internet Explorer 4.0",
"platform":"Win 95+",
"version":"4",
"grade":"X",
"id":4001
},
{
"engine":"Trident",
"browser":"Internet Explorer 5.0",
"platform":"Win 95+",
"version":"5",
"grade":"C",
"id":4002
}
]
},
{
"engine":"Trident",
"browser":"Internet Explorer 7",
"platform":"Win XP SP2+",
"version":"7",
"grade":"A",
"id":5,
"children":[
{
"engine":"Trident",
"browser":"Internet Explorer 4.0",
"platform":"Win 95+",
"version":"4",
"grade":"X",
"id":5001
},
{
"engine":"Trident",
"browser":"Internet Explorer 5.0",
"platform":"Win 95+",
"version":"5",
"grade":"C",
"id":5002
}
]
}
]
},
"body":[
{
"type":"table-v2",
"source":"$rows",
"columns":[
{
"key":"engine",
"title":"Engine"
},
{
"key":"grade",
"title":"Grade"
},
{
"key":"browser",
"title":"Browser"
},
{
"key":"id",
"title":"ID"
},
{
"key":"platform",
"title":"Platform"
}
],
"keyField":"id",
"draggable": true
}
]
}
}
```
## 总结栏
### 顶部单行
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=10",
"body": [
{
"type": "table-v2",
"source": "$rows",
"scroll": {"y": 200},
"columns": [
{
"title": "Engine",
"key": "engine",
},
{
"title": "Version",
feat: Table原子组件
2021-12-24 11:05:02 +08:00
"key": "version"
},
{
"title": "Grade",
"key": "grade"
},
{
"title": "Browser",
"key": "browser"
},
{
"title": "Badge",
"key": "badgeText"
},
{
"title": "Platform",
"key": "platform"
}
],
"headSummary": [
{
"type": "text",
"text": "总计"
},
{
"type": "tpl",
"tpl": "测试测试",
"colSpan": 5
}
],
"rowSelection": {
"type": "checkbox",
"keyField": "id"
}
}
]
}
```
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
### 顶部多行
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=10",
"body": [
{
"type": "table-v2",
"source": "$rows",
"scroll": {"y": 200},
"columns": [
{
"title": "Engine",
"key": "engine",
},
{
"title": "Version",
"key": "version"
},
{
"title": "Grade",
"key": "grade"
},
{
"title": "Browser",
"key": "browser"
},
{
"title": "Badge",
"key": "badgeText"
},
{
"title": "Platform",
"key": "platform"
}
],
"headSummary": [
[
{
"type": "text",
"text": "总计"
},
{
"type": "tpl",
"tpl": "测试测试",
"colSpan": 5
}
],
[
{
"type": "text",
"text": "总结",
"colSpan": 6
}
]
],
"rowSelection": {
"type": "checkbox",
"keyField": "id"
}
}
]
}
```
### 尾部单行
feat: Table原子组件
2021-12-24 11:05:02 +08:00
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=10",
"body": [
{
"type": "table-v2",
"source": "$rows",
"bordered": true,
"scroll": {"y": 200, "x": 1000},
"columns": [
{
"title": "Engine",
"key": "engine",
"fixed": "left"
},
{
"title": "Version",
"key": "version"
},
{
"title": "Grade",
"key": "grade"
},
{
"title": "Browser",
"key": "browser"
},
{
"title": "Badge",
"key": "badgeText"
},
{
"title": "Platform",
"key": "platform"
}
],
"footSummary": [
{
"type": "text",
"text": "总计",
"fixed": 'left'
},
{
"type": "tpl",
"tpl": "测试测试",
"colSpan": 5
}
]
}
]
}
```
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
### 尾部多行
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=10",
"body": [
{
"type": "table-v2",
"source": "$rows",
"bordered": true,
"scroll": {"y": 200, "x": 1000},
"columns": [
{
"title": "Engine",
"key": "engine",
"fixed": "left"
},
{
"title": "Version",
"key": "version"
},
{
"title": "Grade",
"key": "grade"
},
{
"title": "Browser",
"key": "browser"
},
{
"title": "Badge",
"key": "badgeText"
},
{
"title": "Platform",
"key": "platform"
}
],
"footSummary": [
{
"type": "text",
"text": "总计",
"colSpan": 6
},
[
{
"type": "tpl",
"tpl": "测试测试",
"colSpan": 5
},
{
"type": "text",
"text": "总结",
"colSpan": 1
}
]
]
}
]
}
```
feat: Table原子组件
2021-12-24 11:05:02 +08:00
## 调整列宽
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=6",
"body": [
{
"type": "table-v2",
"source": "$rows",
"scroll": {"x": 1000},
"resizable": true,
"columns": [
{
"title": "Engine",
"key": "engine",
"width": 200,
"align": "center"
},
{
"title": "Version",
"key": "version",
"width": 200,
"align": "right"
},
{
"title": "Grade",
"key": "grade",
"width": 200
},
{
"title": "Browser",
"key": "browser",
"width": 200
},
{
"title": "Badge",
"key": "badgeText"
},
{
"title": "Platform",
"key": "platform"
}
]
}
]
}
```
## 自定义列
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=6",
"body": [
{
"type": "table-v2",
"source": "$rows",
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
"columnsTogglable": true,
feat: Table原子组件
2021-12-24 11:05:02 +08:00
"title": "表格的标题",
"columns": [
{
"title": "Engine",
"key": "engine",
"width": 200
},
{
"title": "Version",
"key": "version",
"width": 200
},
{
"title": "Browser",
"key": "browser",
"width": 200,
"children": [
{
"title": "Grade",
"key": "grade",
"width": 200
}
]
},
{
"title": "Badge",
"key": "badgeText"
},
{
"title": "Platform",
"key": "platform"
}
]
}
]
}
```
## 数据为空
```schema
{
"type": "table-v2",
"data": {
"items": []
},
"columns": [
{
"title": "Engine",
"key": "engine",
"width": 200
},
{
"title": "Version",
"key": "version",
"width": 200
},
{
"title": "Browser",
"key": "browser",
"width": 200,
"children": [
{
"title": "Grade",
"key": "grade",
"width": 200
}
]
},
{
"title": "Platform",
"key": "platform",
"children": [
{
"title": "Badge",
"key": "badgeText"
}
]
}
],
"placeholder": "暂无数据"
}
```
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
## 数据加载中
feat: Table原子组件
2021-12-24 11:05:02 +08:00
```schema
{
"type": "table-v2",
"data": {
"items": []
},
"columns": [
{
"title": "Engine",
"key": "engine",
"width": 200
},
{
"title": "Version",
"key": "version",
"width": 200
},
{
"title": "Browser",
"key": "browser",
"width": 200,
"children": [
{
"title": "Grade",
"key": "grade",
"width": 200
},
{
"title": "Badge",
"key": "badgeText",
"children": [
{
"title": "Platform",
"key": "platform"
}
]
}
]
}
],
"loading": true
}
```
## 树形结构
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
当行数据中存在 children 属性时，可以自动嵌套显示下去。也可以通过设置 childrenColumnName 进行配置。
feat: Table原子组件
2021-12-24 11:05:02 +08:00
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
### 默认嵌套
feat: Table原子组件
2021-12-24 11:05:02 +08:00
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
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":[
{
"type":"table-v2",
"source":"$rows",
"columns":[
{
"key":"engine",
"title":"Engine"
},
{
"key":"grade",
"title":"Grade"
},
{
"key":"version",
"title":"Version"
},
{
"key":"browser",
"title":"Browser"
},
{
"key":"id",
"title":"ID"
},
{
"key":"platform",
"title":"Platform"
}
],
"keyField":"id"
}
]
}
}
```
feat: Table原子组件
2021-12-24 11:05:02 +08:00
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
### 多选嵌套
feat: Table原子组件
2021-12-24 11:05:02 +08:00
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
表格支持多选的同时支持级联选中
feat: Table原子组件
2021-12-24 11:05:02 +08:00
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
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":[
{
"type":"table-v2",
"source":"$rows",
"columns":[
{
"key":"engine",
"title":"Engine"
},
{
"key":"grade",
"title":"Grade"
},
{
"key":"version",
"title":"Version"
},
{
"key":"browser",
"title":"Browser"
},
{
"key":"id",
"title":"ID"
},
{
"key":"platform",
"title":"Platform"
}
],
"keyField":"id",
"rowSelection":{
"type":"checkbox",
"keyField":"id"
}
}
]
}
}
```
### 单选嵌套
单选 不同层级之间都是互斥选择
```schema: scope="body"
{
"type":"page",
"body":{
"type":"service",
"data":{
"rows":[
{
"engine":"Trident",
"browser":"Internet Explorer 4.0",
"platform":"Win 95+",
"version":"4",
"grade":"X",
"id":1,
"children":[
{
"engine":"Trident",
"browser":"Internet Explorer 4.0",
"platform":"Win 95+",
"version":"4",
"grade":"X",
"id":1001,
"children":[
{
"engine":"Trident",
"browser":"Internet Explorer 4.0",
"platform":"Win 95+",
"version":"4",
"grade":"X",
"id":10001
},
{
"engine":"Trident",
"browser":"Internet Explorer 5.0",
"platform":"Win 95+",
"version":"5",
"grade":"C",
"id":10002
}
]
},
{
"engine":"Trident",
"browser":"Internet Explorer 5.0",
"platform":"Win 95+",
"version":"5",
"grade":"C",
"id":1002
}
]
},
{
"engine":"Trident",
"browser":"Internet Explorer 5.0",
"platform":"Win 95+",
"version":"5",
"grade":"C",
"id":2,
"children":[
{
"engine":"Trident",
"browser":"Internet Explorer 4.0",
"platform":"Win 95+",
"version":"4",
"grade":"X",
"id":2001
},
{
"engine":"Trident",
"browser":"Internet Explorer 5.0",
"platform":"Win 95+",
"version":"5",
"grade":"C",
"id":2002
}
]
},
{
"engine":"Trident",
"browser":"Internet Explorer 5.5",
"platform":"Win 95+",
"version":"5.5",
"grade":"A",
"id":3,
"children":[
{
"engine":"Trident",
"browser":"Internet Explorer 4.0",
"platform":"Win 95+",
"version":"4",
"grade":"X",
"id":3001
},
{
"engine":"Trident",
"browser":"Internet Explorer 5.0",
"platform":"Win 95+",
"version":"5",
"grade":"C",
"id":3002
}
]
},
{
"engine":"Trident",
"browser":"Internet Explorer 6",
"platform":"Win 98+",
"version":"6",
"grade":"A",
"id":4,
"children":[
{
"engine":"Trident",
"browser":"Internet Explorer 4.0",
"platform":"Win 95+",
"version":"4",
"grade":"X",
"id":4001
},
{
"engine":"Trident",
"browser":"Internet Explorer 5.0",
"platform":"Win 95+",
"version":"5",
"grade":"C",
"id":4002
}
]
},
{
"engine":"Trident",
"browser":"Internet Explorer 7",
"platform":"Win XP SP2+",
"version":"7",
"grade":"A",
"id":5,
"children":[
{
"engine":"Trident",
"browser":"Internet Explorer 4.0",
"platform":"Win 95+",
"version":"4",
"grade":"X",
"id":5001
},
{
"engine":"Trident",
"browser":"Internet Explorer 5.0",
"platform":"Win 95+",
"version":"5",
"grade":"C",
"id":5002
}
]
}
]
},
"body":[
{
"type":"table-v2",
"source":"$rows",
"columns":[
{
"key":"engine",
"title":"Engine"
},
{
"key":"grade",
"title":"Grade"
},
{
"key":"version",
"title":"Version"
},
{
"key":"browser",
"title":"Browser"
},
{
"key":"id",
"title":"ID"
},
{
"key":"platform",
"title":"Platform"
}
],
"keyField":"id",
"rowSelection":{
"type":"radio",
"keyField":"id"
}
}
]
}
}
```
### 缩进设置
```schema: scope="body"
{
"type":"page",
"body":{
"type":"service",
"data":{
"rows":[
{
"engine":"Trident",
"browser":"Internet Explorer 4.0",
"platform":"Win 95+",
"version":"4",
"grade":"X",
"id":1,
"children":[
{
"engine":"Trident",
"browser":"Internet Explorer 4.0",
"platform":"Win 95+",
"version":"4",
"grade":"X",
"id":1001,
"children":[
{
"engine":"Trident",
"browser":"Internet Explorer 4.0",
"platform":"Win 95+",
"version":"4",
"grade":"X",
"id":10001
},
{
"engine":"Trident",
"browser":"Internet Explorer 5.0",
"platform":"Win 95+",
"version":"5",
"grade":"C",
"id":10002
}
]
},
{
"engine":"Trident",
"browser":"Internet Explorer 5.0",
"platform":"Win 95+",
"version":"5",
"grade":"C",
"id":1002
}
]
},
{
"engine":"Trident",
"browser":"Internet Explorer 5.0",
"platform":"Win 95+",
"version":"5",
"grade":"C",
"id":2,
"children":[
{
"engine":"Trident",
"browser":"Internet Explorer 4.0",
"platform":"Win 95+",
"version":"4",
"grade":"X",
"id":2001
},
{
"engine":"Trident",
"browser":"Internet Explorer 5.0",
"platform":"Win 95+",
"version":"5",
"grade":"C",
"id":2002
}
]
},
{
"engine":"Trident",
"browser":"Internet Explorer 5.5",
"platform":"Win 95+",
"version":"5.5",
"grade":"A",
"id":3,
"children":[
{
"engine":"Trident",
"browser":"Internet Explorer 4.0",
"platform":"Win 95+",
"version":"4",
"grade":"X",
"id":3001
},
{
"engine":"Trident",
"browser":"Internet Explorer 5.0",
"platform":"Win 95+",
"version":"5",
"grade":"C",
"id":3002
}
]
},
{
"engine":"Trident",
"browser":"Internet Explorer 6",
"platform":"Win 98+",
"version":"6",
"grade":"A",
"id":4,
"children":[
{
"engine":"Trident",
"browser":"Internet Explorer 4.0",
"platform":"Win 95+",
"version":"4",
"grade":"X",
"id":4001
},
{
"engine":"Trident",
"browser":"Internet Explorer 5.0",
"platform":"Win 95+",
"version":"5",
"grade":"C",
"id":4002
}
]
},
{
"engine":"Trident",
"browser":"Internet Explorer 7",
"platform":"Win XP SP2+",
"version":"7",
"grade":"A",
"id":5,
"children":[
{
"engine":"Trident",
"browser":"Internet Explorer 4.0",
"platform":"Win 95+",
"version":"4",
"grade":"X",
"id":5001
},
{
"engine":"Trident",
"browser":"Internet Explorer 5.0",
"platform":"Win 95+",
"version":"5",
"grade":"C",
"id":5002
}
]
}
]
},
"body":[
{
"type":"table-v2",
"source":"$rows",
"columns":[
{
"key":"engine",
"title":"Engine"
},
{
"key":"grade",
"title":"Grade"
},
{
"key":"version",
"title":"Version"
},
{
"key":"browser",
"title":"Browser"
},
{
"key":"id",
"title":"ID"
},
{
"key":"platform",
"title":"Platform"
}
],
"keyField":"id",
"rowSelection":{
"type":"checkbox",
"keyField":"id"
},
"indentSize": 20
}
]
}
}
```
## 列搜索
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=6",
"body": [
{
"type": "table-v2",
"source": "$rows",
"columns": [
{
"title": "Engine",
"key": "engine",
"width": 200
},
{
"title": "Version",
"key": "version",
"width": 200,
"searchable": true
},
{
"title": "Browser",
"key": "browser",
"width": 200,
"children": [
{
"title": "Grade",
"key": "grade",
"width": 200
}
]
},
{
"title": "Badge",
"key": "badgeText"
},
{
"title": "Platform",
"key": "platform"
}
]
}
]
}
```
## 粘性头部
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=6",
"body": [
{
"type": "table-v2",
"source": "$rows",
"title": "表格的标题",
"columns": [
{
"title": "Engine",
"key": "engine",
"width": 200
},
{
"title": "Version",
"key": "version",
"width": 200
},
{
"title": "Browser",
"key": "browser",
"width": 200,
"children": [
{
"title": "Grade",
"key": "grade",
"width": 200
}
]
},
{
"title": "Badge",
"key": "badgeText"
},
{
"title": "Platform",
"key": "platform"
}
],
"sticky": true
}
]
}
```
## 表格尺寸
通过设置size属性来控制表格尺寸，支持`large`、`default`、`small`，`default`是中等尺寸
### 最大尺寸
`large`是最大尺寸
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=6",
"body": [
{
"type": "table-v2",
"source": "$rows",
"size": "large",
"rowSelection": {
"type": "checkbox",
"keyField": "id"
},
"columns": [
{
"title": "Engine",
"key": "engine",
"sorter": true,
"tpl": "${engine|truncate:5}"
},
{
"title": "Version",
"key": "version",
"sorter": true,
"filterMultiple": true,
"filters": [
{
"text": "Joe",
"value": "Joe"
},
{
"text": "Jim",
"value": "Jim"
}
]
},
{
"type": "tpl",
"title": "Browser",
"key": "browser",
"tpl": "${browser|truncate:5}",
"searchable": true
},
{
"title": "Badge",
"key": "badgeText"
},
{
"title": "Platform",
"key": "platform"
}
],
"footSummary": [
{
"type": "text",
"text": "总计",
"fixed": "left"
},
{
"type": "tpl",
"tpl": "测试测试",
"colSpan": 5
}
]
}
]
}
```
### 默认尺寸
默认尺寸是`default`，即中等尺寸
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=6",
"body": [
{
"type": "table-v2",
"source": "$rows",
"rowSelection": {
"type": "checkbox",
"keyField": "id"
},
"columns": [
{
"title": "Engine",
"key": "engine",
"sorter": true,
"tpl": "${engine|truncate:5}"
},
{
"title": "Version",
"key": "version",
"sorter": true,
"filterMultiple": true,
"filters": [
{
"text": "Joe",
"value": "Joe"
},
{
"text": "Jim",
"value": "Jim"
}
]
},
{
"type": "tpl",
"title": "Browser",
"key": "browser",
"tpl": "${engine|truncate:5}",
"searchable": true
},
{
"title": "Badge",
"key": "badgeText"
},
{
"title": "Platform",
"key": "platform"
}
],
"footSummary": [
{
"type": "text",
"text": "总计",
"fixed": "left"
},
{
"type": "tpl",
"tpl": "测试测试",
"colSpan": 5
}
]
}
]
}
```
### 小尺寸
最小尺寸
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=6",
"body": [
{
"type": "table-v2",
"source": "$rows",
"size": "small",
"rowSelection": {
"type": "checkbox",
"keyField": "id"
},
"columns": [
{
"title": "Engine",
"key": "engine",
"sorter": true,
"tpl": "${engine|truncate:5}"
},
{
"title": "Version",
"key": "version",
"sorter": true,
"filterMultiple": true,
"filters": [
{
"text": "Joe",
"value": "Joe"
},
{
"text": "Jim",
"value": "Jim"
}
]
},
{
"type": "tpl",
"title": "Browser",
"key": "browser",
"tpl": "${engine|truncate:5}",
"searchable": true
},
{
"title": "Badge",
"key": "badgeText"
},
{
"title": "Platform",
"key": "platform"
}
],
"footSummary": [
{
"type": "text",
"text": "总计",
"fixed": "left"
},
{
"type": "tpl",
"tpl": "测试测试",
"colSpan": 5
}
]
}
]
}
```
## 可复制
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=6",
"body": [
{
"type": "table-v2",
"source": "$rows",
"title": "表格的标题",
"columns": [
{
"title": "Engine",
"key": "engine",
"width": 200
},
{
"title": "Version",
"key": "version",
"copyable": true
},
{
"title": "Browser",
"key": "browser",
"width": 200
},
{
"title": "Badge",
"key": "badgeText"
},
{
"title": "Platform",
"key": "platform"
}
]
}
]
}
```
## 弹出框
可以给列配置上`popOver`属性，默认会在该列内容区里渲染一个图标，点击会显示弹出框，用于展示内容
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=6",
"body": [
{
"type": "table-v2",
"source": "$rows",
"columns": [
{
"title": "Engine",
"key": "engine"
},
{
"title": "Version",
"key": "version"
},
{
"title": "Browser",
"key": "browser",
"copyable": true,
"popOver": {
"body": {
"type": "tpl",
"tpl": "详细信息：${browser}"
}
}
},
{
"title": "Badge",
"key": "badgeText"
},
{
"title": "Platform",
"key": "platform"
}
]
}
]
}
```
也可以设置图标不展示，结合truncate实现内容自动省略，其余可点击/悬浮查看更多
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=6",
"body": [
{
"type": "table-v2",
"source": "$rows",
"columns": [
{
"title": "Engine",
"key": "engine"
},
{
"title": "Version",
"key": "version"
},
{
"type": "tpl",
"title": "Browser",
"key": "browser",
"tpl": "${engine|truncate:5}",
"popOver": {
"trigger": "hover",
"position": "left-top",
"showIcon": false,
"body": {
"type": "tpl",
"tpl": "${browser}"
}
}
},
{
"title": "Badge",
"key": "badgeText"
},
{
"title": "Platform",
"key": "platform"
}
]
}
]
}
```
可以给列配置`popOverEnableOn`属性，该属性为表达式，来控制当前行是否启动`popOver`功能
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=6",
"body": [
{
"type": "table-v2",
"source": "$rows",
"columns": [
{
"title": "ID",
"key": "id",
"popOver": {
"body": {
"type": "tpl",
"tpl": "${id}"
}
},
"popOverEnableOn": "this.id == 1"
},
{
"title": "Engine",
"key": "engine"
},
{
"title": "Version",
"key": "version"
},
{
"title": "Browser",
"key": "browser",
"popOver": {
"body": {
"type": "tpl",
"tpl": "${browser}"
}
}
},
{
"title": "Badge",
"key": "badgeText"
},
{
"title": "Platform",
"key": "platform"
}
]
}
]
}
```
## 行角标
通过属性`itemBadge`，可以为表格行配置[角标](./badge)，可以使用[数据映射](../../../docs/concepts/data-mapping)为每一行添加特定的 Badge 属性。[`visibleOn`](../../../docs/concepts/expression)属性控制显示的条件，表达式中`this`可以取到行所在上下文的数据，比如行数据中有`badgeText`字段才显示角标，可以设置`"visibleOn": "this.badgeText"`
```schema: scope="body"
{
"type": "service",
"body": {
"type": "table-v2",
"source": "${table}",
"syncLocation": false,
"showBadge": true,
"itemBadge": {
"text": "${badgeText}",
"mode": "ribbon",
"position": "top-left",
"level": "${badgeLevel}",
"visibleOn": "this.badgeText"
},
"columns": [
{
"key": "id",
"title": "ID",
"searchable": {
"type": "input-text",
"name": "id",
"label": "主键",
"placeholder": "输入id",
"size": "sm",
}
},
{
"key": "engine",
"title": "Rendering engine"
},
{
"key": "browser",
"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"
}
]
}
},
{
"key": "platform",
"title": "Platform(s)"
},
{
"key": "version",
"title": "Engine version",
"searchable": {
"type": "input-number",
"name": "version",
"label": "版本号",
"placeholder": "输入版本号",
"size": "sm",
"mode": "horizontal"
}
},
{
"key": "grade",
"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": [
{
"type": "table-v2",
"source": "$rows",
"columns": [
{
"title": "Engine",
"key": "engine",
"remark": "表头提示"
},
{
"title": "Version",
"key": "version"
},
{
"title": "Browser",
"key": "browser"
},
{
"title": "Badge",
"key": "badgeText"
},
{
"title": "Grade",
"key": "grade"
},
{
"title": "Platform",
"key": "platform"
}
]
}
]
}
}
```
## 快速编辑
可以通过给列配置：`"quickEdit": true`，Table配置：`quickSaveApi`，可以实现表格内快速编辑并批量保存的功能。
```schema: scope="body"
{
"type": "page",
"body": {
"type": "service",
"api": "/api/sample?perPage=5",
"body": [
{
"type": "table-v2",
"source": "$rows",
"quickSaveApi": {
"url": "/api/mock2/sample/bulkUpdate",
"method": "put"
},
"columns": [
{
"title": "Engine",
"key": "engine",
"quickEdit": true
},
{
"title": "Version",
"key": "version"
},
{
"title": "Browser",
"key": "browser"
},
{
"title": "Badge",
"key": "badgeText"
}
]
}
]
}
}
```
#### 指定编辑表单项类型
`quickEdit`也可以配置对象形式，可以指定编辑表单项的类型，例如`"type": "select"`：
```schema: scope="body"
{
"type": "page",
"body": {
"type": "service",
"api": "/api/sample?perPage=5",
"body": [
{
"type": "table-v2",
"source": "$rows",
"quickSaveApi": {
"url": "/api/mock2/sample/bulkUpdate",
"method": "put"
},
"columns": [
{
"key": "id",
"title": "ID"
},
{
"key": "grade",
"title": "CSS grade",
"quickEdit": {
"type": "select",
"options": [
"A",
"B",
"C",
"D",
"X"
]
}
}
]
}
]
}
}
```
#### 快速编辑多个表单项
```schema: scope="body"
{
"type": "page",
"body": {
"type": "service",
"api": "/api/sample?perPage=5",
"body": [
{
"type": "table-v2",
"source": "$rows",
"quickSaveApi": {
"url": "/api/mock2/sample/bulkUpdate",
"method": "put"
},
"columns": [
{
"key": "id",
"title": "ID"
},
{
"key": "grade",
"title": "CSS grade",
"quickEdit": {
"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": [
{
"type": "table-v2",
"source": "$rows",
"quickSaveApi": {
"url": "/api/mock2/sample/bulkUpdate",
"method": "put"
},
"columns": [
{
"key": "id",
"title": "ID"
},
{
"key": "grade",
"title": "CSS grade",
"quickEdit": {
"mode": "inline",
"type": "select",
"size": "xs",
"options": [
"A",
"B",
"C",
"D",
"X"
]
}
},
{
"key": "switch",
"title": "switch",
"quickEdit": {
"mode": "inline",
"type": "switch",
"onText": "开启",
"offText": "关闭"
}
}
]
}
]
}
}
```
#### 即时保存
如果想编辑完表单项之后，不想点击顶部确认按钮来进行保存，而是即时保存当前标记的数据，则需要配置 `quickEdit` 中的 `"saveImmediately": true`，然后配置接口`quickSaveItemApi`，可以直接将编辑表单项渲染至表格内操作。
```schema: scope="body"
{
"type": "page",
"body": {
"type": "service",
"api": "/api/sample?perPage=5",
"body": [
{
"type": "table-v2",
"source": "$rows",
"quickSaveItemApi": {
"url": "/api/mock2/sample/$id",
"method": "put"
},
"columns": [
{
"key": "id",
"title": "ID"
},
{
"key": "grade",
"title": "CSS grade",
"quickEdit": {
"mode": "inline",
"type": "select",
"size": "xs",
"options": [
"A",
"B",
"C",
"D",
"X"
],
"saveImmediately": true
}
},
{
"key": "switch",
"title": "switch",
"quickEdit": {
"mode": "inline",
"type": "switch",
"onText": "开启",
"offText": "关闭",
"saveImmediately": true
}
}
]
}
]
}
}
```
你也可以在`saveImmediately`中配置 api，实现即时保存
```schema: scope="body"
{
"type": "page",
"body": {
"type": "service",
"api": "/api/sample?perPage=5",
"body": [
{
"type": "table-v2",
"source": "$rows",
"columns": [
{
"key": "id",
"title": "ID"
},
{
"key": "grade",
"title": "CSS grade",
"quickEdit": {
"mode": "inline",
"type": "select",
"size": "xs",
"options": [
"A",
"B",
"C",
"D",
"X"
],
"saveImmediately": {
"api": "/api/mock2/sample/$id"
}
}
},
{
"key": "grade",
"title": "CSS grade",
"quickEdit": {
"mode": "inline",
"type": "switch",
"onText": "开启",
"offText": "关闭",
"saveImmediately": true
}
}
]
}
]
}
}
```
feat:Table2支持配置单元格样式、行操作按钮 (#4268) Co-authored-by: wanglinfang <wanglinfang@baidu.com>
2022-05-10 20:16:35 +08:00
## 列样式
可以通过设置`columns`中的`className`控制整列样式
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=5",
"body": [
{
"type": "table-v2",
"source": "$rows",
"columns": [
{
"title": "Engine",
"key": "engine"
},
{
"title": "Version",
"key": "version",
"className": "text-primary"
},
{
"title": "Browser",
"key": "browser"
},
{
"title": "Operation",
"key": "operation",
"type": "button",
"label": "删除",
"size": "sm"
}
]
}
]
}
```
也可以通过`titleClassName`单独控制表头对应单元格的样式
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=5",
"body": [
{
"type": "table-v2",
"source": "$rows",
"columns": [
{
"title": "Engine",
"key": "engine"
},
{
"title": "Version",
"key": "version",
"className": "text-primary",
"titleClassName": "font-bold"
},
{
"title": "Browser",
"key": "browser"
},
{
"title": "Operation",
"key": "operation",
"type": "button",
"label": "删除",
"size": "sm"
}
]
}
]
}
```
## 单元格样式
可以通过设置`columns`的`classNameExpr`，根据数据动态添加单元格CSS类，支持模版语法
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=5",
"body": [
{
"type": "table-v2",
"source": "$rows",
"columns": [
{
"title": "Engine",
"key": "engine"
},
{
"title": "Version",
"key": "version",
"classNameExpr": "<%= data.version > 5 ? 'text-danger' : '' %>"
},
{
"title": "Browser",
"key": "browser"
},
{
"title": "Operation",
"key": "operation",
"type": "button",
"label": "删除",
"size": "sm"
}
]
}
]
}
```
## 行操作按钮
通过设置`itemActions`可以设置鼠标移动到行上出现操作按钮
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=5",
"body": [
{
"type": "table-v2",
"source": "$rows",
"itemActions": [
{
"label": "编辑",
"type": "button",
"actionType": "dialog",
"dialog": {
"title": "编辑",
"body": "这是个简单的编辑弹框"
}
},
{
"label": "删除",
"type": "button",
"actionType": "ajax",
"confirmText": "确认要删除？",
"api": "/api/mock2/form/saveForm"
}
],
"columns": [
{
"title": "Engine",
"key": "engine"
},
{
"title": "Version",
"key": "version"
}
]
}
]
}
```
固定表头情况下，展示行操作按钮
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=20",
"body": [
{
"type": "table-v2",
"source": "$rows",
"itemActions": [
{
"label": "编辑",
"type": "button",
"actionType": "dialog",
"dialog": {
"title": "编辑",
"body": "这是个简单的编辑弹框"
}
},
{
"label": "删除",
"type": "button",
"actionType": "ajax",
"confirmText": "确认要删除？",
"api": "/api/mock2/form/saveForm"
}
],
"scroll": {
"y": 100
},
"columns": [
{
"title": "Engine",
"key": "engine"
},
{
"title": "Version",
"key": "version"
}
]
}
]
}
```
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +08:00
## 属性表
| 属性名 | 类型 | 默认值 | 说明 |
| ---------------- | ---------------------------------------- | ------------------------- | ------------------------------------------------------------------------- |
| type | `string` | | `"type"` 指定为 table 渲染器 |
| title | `string` | | 标题 |
| source | `string` | `${items}` | 数据源, 绑定当前环境变量 |
| sticky | `boolean` | `false` | 是否粘性头部
| footer | `string` \| `Schema` | | 表格尾部 |
| loading | `boolean` | | 表格是否加载中 |
| columnsTogglable | `auto` 或者 `boolean` | `auto` | 展示列显示开关, 自动即：列数量大于或等于 5 个时自动开启 |
| placeholder | `string` \| `Schema` | `暂无数据` | 当没数据的时候的文字提示
| rowSelection | `rowSelection` | | 行相关配置 |
| rowClassNameExpr | `string` | | 行 CSS 类名，支持模版语法 |
| expandable | `Expandable` | | 展开行配置 |
| lineHeight | `large` \| `middle` | | 行高设置 |
| footerClassName | `string` | `Action.md-table-footer` | 底部外层 CSS 类名 |
| toolbarClassName | `string` | `Action.md-table-toolbar` | 工具栏 CSS 类名 |
| columns | `Array<Column>` | | 用来设置列信息 |
| combineNum | `number` | | 自动合并单元格 |
| itemActions | Array<[Action](./action-button)> | | 悬浮行操作按钮组 |
| itemCheckableOn | [表达式](../../docs/concepts/expression) | | 配置当前行是否可勾选的条件，要用 [表达式](../../docs/concepts/expression) |
| itemDraggableOn | [表达式](../../docs/concepts/expression) | | 配置当前行是否可拖拽的条件，要用 [表达式](../../docs/concepts/expression) |
| checkOnItemClick | `boolean` | `false` | 点击数据行是否可以勾选当前行 |
feat: Table原子组件
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` | | 内容区域自适应高度 |
feat:调整列宽问题修复；新增sticky属性；列搜索；单元格支持编辑等
2021-12-31 17:33:11 +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 | number>` | | 已选择项 |
| selectedRowKeysExpr | `string` | | 已选择项正则表达式 |
| columnWidth | `number` | | 自定义选择列列宽 |
| rowClick | `boolean` | | 单条任意区域选中 |
### 选择菜单配置属性表
| 属性名 | 类型 | 默认值 | 说明 |
| ---------- | --------------------------------------------- | ------- | ---------------- |
| key | `all` \| `invert` \| `none` \| `odd` \| `even` | `all` | 菜单类型，内置全选、反选、取消选择、选择奇数项、选择偶数项 |
| text | `string` | | 自定义菜单项文本 |
## 展开行配置属性表
| 属性名 | 类型 | 默认值 | 说明 |
| ---------- | --------------------------------------------- | ------- | ---------------- |
| 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 | number>` | | 已选择项 |
| selectedRowKeysExpr | `string` | | 已选择项正则表达式 |
| columnWidth | `number` | | 自定义选择列列宽 |
feat: Table原子组件
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 | | | 提示信息 |
Reference in New Issue Copy Permalink