From 5aa7a8771ac77c4325bcd190d0d3891acc45735d Mon Sep 17 00:00:00 2001 From: liaoxuezhi <2698393+2betop@users.noreply.github.com> Date: Fri, 12 Jul 2024 13:54:17 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20crud=20=E5=88=97=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=AF=B9=E9=BD=90=E6=96=B9=E5=BC=8F&?= =?UTF-8?q?=E8=A1=A8=E5=A4=B4=E5=AF=B9=E9=BD=90=E6=96=B9=E6=A1=88&?= =?UTF-8?q?=E5=9E=82=E7=9B=B4=E5=AF=B9=E9=BD=90=E6=96=B9=E5=BC=8F=20(#1062?= =?UTF-8?q?4)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/components/table.md | 25 ++++++------ .../src/plugin/Others/TableCell.tsx | 38 ++++++++++++++++++- .../amis/src/renderers/Table/TableBody.tsx | 3 ++ .../amis/src/renderers/Table/TableCell.tsx | 8 ++++ packages/amis/src/renderers/Table/index.tsx | 15 +++++++- 5 files changed, 76 insertions(+), 13 deletions(-) diff --git a/docs/zh-CN/components/table.md b/docs/zh-CN/components/table.md index 548fabb88..dbbd98766 100755 --- a/docs/zh-CN/components/table.md +++ b/docs/zh-CN/components/table.md @@ -1860,17 +1860,20 @@ popOver 的其它配置请参考 [popover](./popover) ### 列配置属性表 -| 属性名 | 类型 | 默认值 | 说明 | 版本 | -| ---------- | --------------------------------------------- | ------ | ------------------------ | ------- | -| label | [模板](../../docs/concepts/template) | | 表头文本内容 | | -| name | `string` | | 通过名称关联数据 | | -| width | `number` \| `string` | | 列宽 | | -| remark | | | 提示信息 | | -| fixed | `left` \| `right` \| `none` | | 是否固定当前列 | | -| popOver | | | 弹出框 | | -| copyable | `boolean` 或 `{icon: string, content:string}` | | 是否可复制 | | -| style | `object` | | 单元格自定义样式 | | -| innerStyle | `object` | | 单元格内部组件自定义样式 | `2.8.1` | +| 属性名 | 类型 | 默认值 | 说明 | 版本 | +| ----------- | --------------------------------------------- | ------ | ------------------------ | -------- | +| label | [模板](../../docs/concepts/template) | | 表头文本内容 | | +| name | `string` | | 通过名称关联数据 | | +| width | `number` \| `string` | | 列宽 | | +| remark | | | 提示信息 | | +| fixed | `left` \| `right` \| `none` | | 是否固定当前列 | | +| popOver | | | 弹出框 | | +| copyable | `boolean` 或 `{icon: string, content:string}` | | 是否可复制 | | +| style | `object` | | 单元格自定义样式 | | +| innerStyle | `object` | | 单元格内部组件自定义样式 | `2.8.1` | +| align | `left` \| `right` \| `center` \| `justify` | | 单元格对齐方式 | ` 1.4.0` | +| headerAlign | `left` \| `right` \| `center` \| `justify` | | 表头单元格对齐方式 | `6.7.0` | +| vAlign | `top` \| `middle` \| `bottom` | | 单元格垂直对齐方式 | `6.7.0` | ## 事件表 diff --git a/packages/amis-editor/src/plugin/Others/TableCell.tsx b/packages/amis-editor/src/plugin/Others/TableCell.tsx index 98b986ce1..73cb4146d 100644 --- a/packages/amis-editor/src/plugin/Others/TableCell.tsx +++ b/packages/amis-editor/src/plugin/Others/TableCell.tsx @@ -321,6 +321,42 @@ export class TableCellPlugin extends BasePlugin { { title: '外观', body: [ + { + type: 'select', + name: 'align', + label: '对齐方式', + pipeIn: defaultValue('left'), + options: [ + {label: '左对齐', value: 'left'}, + {label: '居中对齐', value: 'center'}, + {label: '右对齐', value: 'right'}, + {label: '两端对齐', value: 'justify'} + ] + }, + { + type: 'select', + name: 'headerAlign', + label: '表头对齐方式', + pipeIn: defaultValue(''), + options: [ + {label: '复用对齐方式', value: ''}, + {label: '左对齐', value: 'left'}, + {label: '居中对齐', value: 'center'}, + {label: '右对齐', value: 'right'}, + {label: '两端对齐', value: 'justify'} + ] + }, + { + type: 'select', + name: 'vAlign', + label: '垂直对齐方式', + pipeIn: defaultValue('middle'), + options: [ + {label: '顶部对齐', value: 'top'}, + {label: '垂直居中', value: 'middle'}, + {label: '底部对齐', value: 'bottom'} + ] + }, { name: 'fixed', type: 'button-group-select', @@ -328,7 +364,7 @@ export class TableCellPlugin extends BasePlugin { pipeIn: defaultValue(''), size: 'xs', mode: 'inline', - className: 'w-full', + inputClassName: 'mt-1 w-full', options: [ { value: '', diff --git a/packages/amis/src/renderers/Table/TableBody.tsx b/packages/amis/src/renderers/Table/TableBody.tsx index ef883a837..45bb66fd2 100644 --- a/packages/amis/src/renderers/Table/TableBody.tsx +++ b/packages/amis/src/renderers/Table/TableBody.tsx @@ -306,6 +306,9 @@ export class TableBody extends React.Component { if (item.align) { style.textAlign = item.align; } + if (item.vAlign) { + style.verticalAlign = item.vAlign; + } const [stickyStyle, stickyClassName] = store.getStickyStyles( lastColumn.fixed === 'right' ? lastColumn : firstColumn, store.filteredColumns diff --git a/packages/amis/src/renderers/Table/TableCell.tsx b/packages/amis/src/renderers/Table/TableCell.tsx index 175d53459..fe8e6822b 100644 --- a/packages/amis/src/renderers/Table/TableCell.tsx +++ b/packages/amis/src/renderers/Table/TableCell.tsx @@ -52,6 +52,7 @@ export class TableCell extends React.Component { children, width, align, + vAlign, innerClassName, label, tabIndex, @@ -123,6 +124,13 @@ export class TableCell extends React.Component { }; } + if (vAlign) { + style = { + ...style, + verticalAlign: vAlign + }; + } + if (column.backgroundScale) { const backgroundScale = column.backgroundScale; let min = backgroundScale.min; diff --git a/packages/amis/src/renderers/Table/index.tsx b/packages/amis/src/renderers/Table/index.tsx index 2ff9164ec..480595534 100644 --- a/packages/amis/src/renderers/Table/index.tsx +++ b/packages/amis/src/renderers/Table/index.tsx @@ -142,6 +142,16 @@ export type TableColumnObject = { */ align?: 'left' | 'right' | 'center' | 'justify'; + /** + * 列垂直对齐方式 + */ + vAlign?: 'top' | 'middle' | 'bottom'; + + /** + * 标题左右对齐方式 + */ + headerAlign?: 'left' | 'right' | 'center' | 'justify'; + /** * 列样式表 */ @@ -1866,7 +1876,10 @@ export default class Table extends React.Component { if (style?.width) { delete style.width; } - if (column.pristine.align) { + + if (column.pristine.headerAlign) { + style.textAlign = column.pristine.headerAlign; + } else if (column.pristine.align) { style.textAlign = column.pristine.align; }