From 234920a545bc585ade7c59186690f51b1e43aae6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E5=A4=9A=E7=9B=8A?= Date: Thu, 14 Oct 2021 15:49:24 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20table=20=E7=9A=84?= =?UTF-8?q?=E5=88=97=E6=94=AF=E6=8C=81=E8=AE=BE=E7=BD=AE=E5=AF=B9=E9=BD=90?= =?UTF-8?q?=E6=96=B9=E5=BC=8F=E5=8F=8A=E6=A0=B7=E5=BC=8F=E7=B1=BB=20(#2700?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 增加 table 的列支持设置对齐方式及样式类 * feat: 增加 table 的列支持设置对齐方式及样式类 --- docs/zh-CN/components/table.md | 154 +++++++++++++++++++++++++----- src/renderers/Table/TableCell.tsx | 8 ++ src/renderers/Table/index.tsx | 44 ++++++--- 3 files changed, 171 insertions(+), 35 deletions(-) diff --git a/docs/zh-CN/components/table.md b/docs/zh-CN/components/table.md index 421032228..4d6e31d40 100755 --- a/docs/zh-CN/components/table.md +++ b/docs/zh-CN/components/table.md @@ -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 这一栏。 @@ -1412,26 +1503,41 @@ order: 67 ## 属性表 -| 属性名 | 类型 | 默认值 | 说明 | -| ---------------- | --------------------------------------------- | ------------------------- | ------------------------------------------------------------------------- | -| type | `string` | | `"type"` 指定为 table 渲染器 | -| title | `string` | | 标题 | -| source | `string` | `${items}` | 数据源, 绑定当前环境变量 | -| affixHeader | `boolean` | `true` | 是否固定表头 | -| columnsTogglable | `auto` 或者 `boolean` | `auto` | 展示列显示开关, 自动即：列数量大于或等于 5 个时自动开启 | -| placeholder | string | `暂无数据` | 当没数据的时候的文字提示 | -| className | `string` | `panel-default` | 外层 CSS 类名 | -| tableClassName | `string` | `table-db table-striped` | 表格 CSS 类名 | -| headerClassName | `string` | `Action.md-table-header` | 顶部外层 CSS 类名 | -| footerClassName | `string` | `Action.md-table-footer` | 底部外层 CSS 类名 | -| toolbarClassName | `string` | `Action.md-table-toolbar` | 工具栏 CSS 类名 | -| columns | Array<[Column](#%E5%88%97%E9%85%8D%E7%BD%AE)> | | 用来设置列信息 | -| combineNum | `number` | | 自动合并单元格 | -| itemActions | Array<[Action](./action-button)> | | 悬浮行操作按钮组 | -| itemCheckableOn | [表达式](../../docs/concepts/expression) | | 配置当前行是否可勾选的条件，要用 [表达式](../../docs/concepts/expression) | -| itemDraggableOn | [表达式](../../docs/concepts/expression) | | 配置当前行是否可拖拽的条件，要用 [表达式](../../docs/concepts/expression) | -| checkOnItemClick | `boolean` | `false` | 点击数据行是否可以勾选当前行 | -| rowClassName | `string` | | 给行添加 CSS 类名 | -| rowClassNameExpr | [模板](../../docs/concepts/template) | | 通过模板给行添加 CSS 类名 | -| prefixRow | `Array` | | 顶部总结行 | -| affixRow | `Array` | | 底部总结行 | +| 属性名 | 类型 | 默认值 | 说明 | +| ---------------- | ---------------------------------------- | ------------------------- | ------------------------------------------------------------------------- | +| type | `string` | | `"type"` 指定为 table 渲染器 | +| title | `string` | | 标题 | +| source | `string` | `${items}` | 数据源, 绑定当前环境变量 | +| affixHeader | `boolean` | `true` | 是否固定表头 | +| columnsTogglable | `auto` 或者 `boolean` | `auto` | 展示列显示开关, 自动即：列数量大于或等于 5 个时自动开启 | +| placeholder | string | `暂无数据` | 当没数据的时候的文字提示 | +| className | `string` | `panel-default` | 外层 CSS 类名 | +| tableClassName | `string` | `table-db table-striped` | 表格 CSS 类名 | +| headerClassName | `string` | `Action.md-table-header` | 顶部外层 CSS 类名 | +| footerClassName | `string` | `Action.md-table-footer` | 底部外层 CSS 类名 | +| toolbarClassName | `string` | `Action.md-table-toolbar` | 工具栏 CSS 类名 | +| columns | `Array` | | 用来设置列信息 | +| combineNum | `number` | | 自动合并单元格 | +| itemActions | Array<[Action](./action-button)> | | 悬浮行操作按钮组 | +| itemCheckableOn | [表达式](../../docs/concepts/expression) | | 配置当前行是否可勾选的条件，要用 [表达式](../../docs/concepts/expression) | +| itemDraggableOn | [表达式](../../docs/concepts/expression) | | 配置当前行是否可拖拽的条件，要用 [表达式](../../docs/concepts/expression) | +| checkOnItemClick | `boolean` | `false` | 点击数据行是否可以勾选当前行 | +| rowClassName | `string` | | 给行添加 CSS 类名 | +| rowClassNameExpr | [模板](../../docs/concepts/template) | | 通过模板给行添加 CSS 类名 | +| prefixRow | `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 | | | 提示信息 | diff --git a/src/renderers/Table/TableCell.tsx b/src/renderers/Table/TableCell.tsx index 03ddb4fa3..4c5691f91 100644 --- a/src/renderers/Table/TableCell.tsx +++ b/src/renderers/Table/TableCell.tsx @@ -36,6 +36,7 @@ export class TableCell extends React.Component { data, children, width, + align, innerClassName, label, tabIndex, @@ -90,6 +91,13 @@ export class TableCell extends React.Component { } } + if (align) { + style = { + ...style, + textAlign: align + }; + } + if (!Component) { return body as JSX.Element; } diff --git a/src/renderers/Table/index.tsx b/src/renderers/Table/index.tsx index c52b496d8..36f477aed 100644 --- a/src/renderers/Table/index.tsx +++ b/src/renderers/Table/index.tsx @@ -109,6 +109,21 @@ export type TableColumnObject = { */ width?: number | string; + /** + * 列对齐方式 + */ + align?: 'left' | 'right' | 'center' | 'justify'; + + /** + * 列样式表 + */ + className?: string; + + /** + * 列头样式表 + */ + labelClassName?: string; + /** * todo */ @@ -1531,6 +1546,11 @@ export default class Table extends React.Component { props.style.width = column.pristine.width; } + if (column.pristine.align) { + props.style = props.style || {}; + props.style.textAlign = column.pristine.align; + } + const resizeLine = (
{ return ( -
+
{column.label ? render('tpl', column.label) : null} {column.remark