test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 18:48:45 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

docs: 补充 table-view 作为布局使用的文档 (#2270)

Browse Source 
* docs: 补充 table-view 作为布局使用的文档

* docs: 补充 table-view 作为布局使用的文档
This commit is contained in:
吴多益 2021-07-13 18:04:58 +08:00 committed by GitHub
parent e316636a73
commit e6c30b6c42
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 101 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
docs/zh-CN/components/table-view.md
View File

@ -248,3 +248,103 @@ table view 的设置项有三层，可以分别对表格级别、行级别、单
]
}
```
## 作为布局方法
table-view 除了可以用来展现表格类型的数据，还能用来实现复杂布局效果，只需要将 `border` 隐藏就行，除了拆分单元格还能通过嵌套的方式实现布局，比如：
```schema: scope="body"
{
"type": "table-view",
"border": false,
"trs": [
{
"background": "#feceea",
"tds": [
{
"colspan": 2,
"align": "center",
"body": {
"type": "tpl",
"tpl": "头部"
}
}
]
},
{
"tds": [
{
"rowspan": 2,
"background": "#fef1d2",
"width": 200,
"body": {
"type": "tpl",
"tpl": "侧边"
}
},
{
"align": "center",
"background": "#a9fdd8",
"body": {
"type": "tpl",
"tpl": "右上"
}
}
]
},
{
"height": 200,
"tds": [
{
"align": "center",
"background": "#d7f8ff",
"body": {
"type": "table-view",
"border": false,
"trs": [
{
"tds": [
{
"align": "center",
"body": {
"type": "tpl",
"tpl": "栏目 1"
}
},
{
"align": "center",
"body": {
"type": "tpl",
"tpl": "栏目 2"
}
},
{
"align": "center",
"body": {
"type": "tpl",
"tpl": "栏目 3"
}
}
]
}
]
}
}
]
},
{
"tds": [
{
"colspan": 2,
"align": "center",
"background": "#cec5fa",
"body": {
"type": "tpl",
"tpl": "底部"
}
}
]
}
]
}
```

2
src/renderers/TableView.tsx
View File

@ -219,7 +219,7 @@ export default class TableView extends React.Component<TableViewProps, object> {
style={{height: tr.height, background: tr.background, ...tr.style}}
key={key}
>
{this.renderTds(tr.tds, rowIndex)}
{this.renderTds(tr.tds || [], rowIndex)}
</tr>
);
}