test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 03:58:07 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat: 增加 table 的列支持设置对齐方式及样式类 (#2700)

Browse Source 
* feat: 增加 table 的列支持设置对齐方式及样式类

* feat: 增加 table 的列支持设置对齐方式及样式类
This commit is contained in:
吴多益 2021-10-14 15:49:24 +08:00 committed by GitHub
parent 633fd41650
commit 234920a545
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 171 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
docs/zh-CN/components/table.md
View File

@ -301,7 +301,7 @@ order: 67
### 列宽 ### 列宽
可以给列配置`width`属性，控制列宽，共有两种方式： 可以给列配置 `width` 属性，控制列宽，共有两种方式：
#### 固定像素 #### 固定像素
@ -347,6 +347,97 @@ order: 67
} }
``` ```
### 列对齐方式
> 1.3.5 及以上版本
通过 align 可以控制列文本对齐方式，比如
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=5",
"body": [
{
"type": "table",
"title": "表格1",
"source": "$rows",
"columns": [
{
"name": "engine",
"label": "Engine"
},
{
"label": "Version",
"type": "tpl",
"tpl": "${version | number}",
"align": "right"
}
]
}
]
}
```
### 列样式
> 1.3.5 及以上版本
除了前面的宽度和对齐方式，还有更灵活的控制方法是通过样式表
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=5",
"body": [
{
"type": "table",
"title": "表格1",
"source": "$rows",
"columns": [
{
"name": "engine",
"label": "Engine"
},
{
"name": "version",
"label": "Version",
"className": "text-primary"
}
]
}
]
}
```
如果要单独设置标题的样式，可以使用 `labelClassName` 属性
```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=5",
"body": [
{
"type": "table",
"title": "表格1",
"source": "$rows",
"columns": [
{
"name": "engine",
"label": "Engine"
},
{
"name": "version",
"label": "Version",
"className": "text-primary",
"labelClassName": "font-bold"
}
]
}
]
}
```
### 默认是否显示 ### 默认是否显示
默认 `columnsTogglable` 配置为 `auto`，当列超过 5 列后，就会在工具栏多渲染出来一个列展示与否的开关。你可以设置成 `true` 或者 `false` 来强制开或者关。在列配置中可以通过配置 `toggled` 为 `false` 默认不展示这列，比如下面这个例子中 ID 这一栏。 默认 `columnsTogglable` 配置为 `auto`，当列超过 5 列后，就会在工具栏多渲染出来一个列展示与否的开关。你可以设置成 `true` 或者 `false` 来强制开或者关。在列配置中可以通过配置 `toggled` 为 `false` 默认不展示这列，比如下面这个例子中 ID 这一栏。
@ -1412,26 +1503,41 @@ order: 67
## 属性表 ## 属性表
| 属性名 | 类型 | 默认值 | 说明 | | 属性名 | 类型 | 默认值 | 说明 |
| ---------------- | --------------------------------------------- | ------------------------- | ------------------------------------------------------------------------- | | ---------------- | ---------------------------------------- | ------------------------- | ------------------------------------------------------------------------- |
| type | `string` | | `"type"` 指定为 table 渲染器 | | type | `string` | | `"type"` 指定为 table 渲染器 |
| title | `string` | | 标题 | | title | `string` | | 标题 |
| source | `string` | `${items}` | 数据源, 绑定当前环境变量 | | source | `string` | `${items}` | 数据源, 绑定当前环境变量 |
| affixHeader | `boolean` | `true` | 是否固定表头 | | affixHeader | `boolean` | `true` | 是否固定表头 |
| columnsTogglable | `auto` 或者 `boolean` | `auto` | 展示列显示开关, 自动即：列数量大于或等于 5 个时自动开启 | | columnsTogglable | `auto` 或者 `boolean` | `auto` | 展示列显示开关, 自动即：列数量大于或等于 5 个时自动开启 |
| placeholder | string | `暂无数据` | 当没数据的时候的文字提示 | | placeholder | string | `暂无数据` | 当没数据的时候的文字提示 |
| className | `string` | `panel-default` | 外层 CSS 类名 | | className | `string` | `panel-default` | 外层 CSS 类名 |
| tableClassName | `string` | `table-db table-striped` | 表格 CSS 类名 | | tableClassName | `string` | `table-db table-striped` | 表格 CSS 类名 |
| headerClassName | `string` | `Action.md-table-header` | 顶部外层 CSS 类名 | | headerClassName | `string` | `Action.md-table-header` | 顶部外层 CSS 类名 |
| footerClassName | `string` | `Action.md-table-footer` | 底部外层 CSS 类名 | | footerClassName | `string` | `Action.md-table-footer` | 底部外层 CSS 类名 |
| toolbarClassName | `string` | `Action.md-table-toolbar` | 工具栏 CSS 类名 | | toolbarClassName | `string` | `Action.md-table-toolbar` | 工具栏 CSS 类名 |
| columns | Array<[Column](#%E5%88%97%E9%85%8D%E7%BD%AE)> | | 用来设置列信息 | | columns | `Array<Column>` | | 用来设置列信息 |
| combineNum | `number` | | 自动合并单元格 | | combineNum | `number` | | 自动合并单元格 |
| itemActions | Array<[Action](./action-button)> | | 悬浮行操作按钮组 | | itemActions | Array<[Action](./action-button)> | | 悬浮行操作按钮组 |
| itemCheckableOn | [表达式](../../docs/concepts/expression) | | 配置当前行是否可勾选的条件，要用 [表达式](../../docs/concepts/expression) | | itemCheckableOn | [表达式](../../docs/concepts/expression) | | 配置当前行是否可勾选的条件，要用 [表达式](../../docs/concepts/expression) |
| itemDraggableOn | [表达式](../../docs/concepts/expression) | | 配置当前行是否可拖拽的条件，要用 [表达式](../../docs/concepts/expression) | | itemDraggableOn | [表达式](../../docs/concepts/expression) | | 配置当前行是否可拖拽的条件，要用 [表达式](../../docs/concepts/expression) |
| checkOnItemClick | `boolean` | `false` | 点击数据行是否可以勾选当前行 | | checkOnItemClick | `boolean` | `false` | 点击数据行是否可以勾选当前行 |
| rowClassName | `string` | | 给行添加 CSS 类名 | | rowClassName | `string` | | 给行添加 CSS 类名 |
| rowClassNameExpr | [模板](../../docs/concepts/template) | | 通过模板给行添加 CSS 类名 | | rowClassNameExpr | [模板](../../docs/concepts/template) | | 通过模板给行添加 CSS 类名 |
| prefixRow | `Array` | | 顶部总结行 | | prefixRow | `Array` | | 顶部总结行 |
| affixRow | `Array` | | 底部总结行 | | affixRow | `Array` | | 底部总结行 |
## 列配置属性表
| 属性名 | 类型 | 默认值 | 说明 |
| ---------- | --------------------------------------------- | ------- | ---------------- |
| label | [模板](../../docs/concepts/template) | | 表头文本内容 |
| name | `string` | | 通过名称关联数据 |
| fixed | `left`/`right`/`none` | | 是否固定当前列 |
| popOver | | | 弹出框 |
| quickEdit | | | 快速编辑 |
| copyable | `boolean` 或 `{icon: string, content:string}` | | 是否可复制 |
| sortable | `boolean` | `false` | 是否可排序 |
| searchable | `boolean` | `false` | 是否可快速搜索 |
| width | `number`/`string` | 列宽 |
| remark | | | 提示信息 |

8
src/renderers/Table/TableCell.tsx
View File

@ -36,6 +36,7 @@ export class TableCell extends React.Component<RendererProps> {
data, data,
children, children,
width, width,
align,
innerClassName, innerClassName,
label, label,
tabIndex, tabIndex,
@ -90,6 +91,13 @@ export class TableCell extends React.Component<RendererProps> {
} }
} }
if (align) {
style = {
...style,
textAlign: align
};
}
if (!Component) { if (!Component) {
return body as JSX.Element; return body as JSX.Element;
} }

44
src/renderers/Table/index.tsx
View File

@ -109,6 +109,21 @@ export type TableColumnObject = {
*/ */
width?: number | string; width?: number | string;
/**
* 列对齐方式
*/
align?: 'left' | 'right' | 'center' | 'justify';
/**
* 列样式表
*/
className?: string;
/**
* 列头样式表
*/
labelClassName?: string;
/** /**
* todo * todo
*/ */
@ -1531,6 +1546,11 @@ export default class Table extends React.Component<TableProps, object> {
props.style.width = column.pristine.width; props.style.width = column.pristine.width;
} }
if (column.pristine.align) {
props.style = props.style || {};
props.style.textAlign = column.pristine.align;
}
const resizeLine = ( const resizeLine = (
<div <div
className={cx('Table-content-colDragLine')} className={cx('Table-content-colDragLine')}
@ -1542,18 +1562,20 @@ export default class Table extends React.Component<TableProps, object> {
return ( return (
<th <th
{...props} {...props}
className={cx( className={cx(props ? (props as any).className : '', {
props ? (props as any).className : '', 'TableCell--sortable': column.sortable,
column.pristine.className, 'TableCell--searchable': column.searchable,
{ 'TableCell--filterable': column.filterable,
'TableCell--sortable': column.sortable, 'Table-operationCell': column.type === 'operation'
'TableCell--searchable': column.searchable, })}
'TableCell--filterable': column.filterable,
'Table-operationCell': column.type === 'operation'
}
)}
> >
<div className={cx(`${ns}TableCell--title`)}> <div
className={cx(
`${ns}TableCell--title`,
column.pristine.className,
column.pristine.labelClassName
)}
>
{column.label ? render('tpl', column.label) : null} {column.label ? render('tpl', column.label) : null}
{column.remark {column.remark