Merge pull request #1115 from RickCole21/master

补充Table文档,小优化文档结构
This commit is contained in:
liaoxuezhi 2020-11-26 19:45:05 +08:00 committed by GitHub
commit db0f8a967e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 71 additions and 18 deletions

View File

@ -400,6 +400,59 @@ order: 67
}
```
### 固定列
列太多可以让重要的几列固定,可以配置固定在左侧还是右侧,只需要给需要固定的列上配置 `fixed` 属性,配置 `left` 或者 `right`
```schema:height="530" scope="body"
{
"type": "service",
"api": "https://houtai.baidu.com/api/sample?perPage=5",
"className": "w-xxl",
"body": [
{
"type": "table",
"source": "$rows",
"className": "m-b-none",
"columnsTogglable": false,
"columns": [
{
"name": "engine",
"label": "Engine",
"fixed": "left"
},
{
"name": "grade",
"label": "Grade"
},
{
"name": "version",
"label": "Version"
},
{
"name": "browser",
"label": "Browser"
},
{
"name": "id",
"label": "ID"
},
{
"name": "platform",
"label": "Platform",
"fixed": "right"
}
]
}
]
}
```
### 可复制
可以在列上配置`"copyable": true`,会在该列的内容区里,渲染一个复制内容的图标,点击可复制该显示内容
@ -989,26 +1042,25 @@ order: 67
}
```
## 固定列
## 高亮行
列太多可以让重要的几列固定,可以配置固定在左侧还是右侧,只需要给需要固定的列上配置 `fixed` 属性,配置 `left` 或者 `right`
可以通过配置`rowClassNameExpr`来为行添加 CSS 类,支持 [模板](../concepts/template) 语法。
例如下例,`"<%= data.id % 2 ? "bg-success" : "" %>"` 表示当行数据的 `id` 变量为 不能被 `2` 整除时,给当前行添加`bg-success` CSS 类名,即绿色背景色
```schema:height="530" scope="body"
{
"type": "service",
"api": "https://houtai.baidu.com/api/sample?perPage=5",
"className": "w-xxl",
"api": "https://houtai.baidu.com/api/sample?perPage=10",
"body": [
{
"type": "table",
"source": "$rows",
"className": "m-b-none",
"columnsTogglable": false,
"rowClassNameExpr": "<%= data.id % 2 ? 'bg-success' : '' %>",
"columns": [
{
"name": "engine",
"label": "Engine",
"fixed": "left"
"label": "Engine"
},
{
@ -1033,8 +1085,7 @@ order: 67
{
"name": "platform",
"label": "Platform",
"fixed": "right"
"label": "Platform"
}
]
}
@ -1063,3 +1114,5 @@ order: 67
| itemCheckableOn | [表达式](../concepts/expression) | | 配置当前行是否可勾选的条件,要用 [表达式](../concepts/expression) |
| itemDraggableOn | [表达式](../concepts/expression) | | 配置当前行是否可拖拽的条件,要用 [表达式](../concepts/expression) |
| checkOnItemClick | `boolean` | `false` | 点击数据行是否可以勾选当前行 |
| rowClassName | `string` | | 给行添加 CSS 类名 |
| rowClassNameExpr | [模板](../concepts/template) | | 通过模板给行添加 CSS 类名 |

View File

@ -634,6 +634,14 @@ export const docs = [
cb(null, makeMarkdownRenderer(doc));
})
},
{
label: 'Table 表格',
path: '/docs/components/table',
getComponent: (location, cb) =>
require(['../../docs/components/table.md'], doc => {
cb(null, makeMarkdownRenderer(doc));
})
},
{
label: 'Action 行为按钮',
path: '/docs/components/action',
@ -938,14 +946,6 @@ export const docs = [
cb(null, makeMarkdownRenderer(doc));
})
},
{
label: 'Table 表格',
path: '/docs/components/table',
getComponent: (location, cb) =>
require(['../../docs/components/table.md'], doc => {
cb(null, makeMarkdownRenderer(doc));
})
},
{
label: 'Tabs 选项卡',
path: '/docs/components/tabs',