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

feat: crud 列支持配置对齐方式&表头对齐方案&垂直对齐方式 (#10624)

Browse Source
This commit is contained in:
liaoxuezhi 2024-07-12 13:54:17 +08:00 committed by GitHub
parent 788de29f12
commit 5aa7a8771a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 76 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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` |
## 事件表

38
packages/amis-editor/src/plugin/Others/TableCell.tsx
View File

@ -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: '',

3
packages/amis/src/renderers/Table/TableBody.tsx
View File

@ -306,6 +306,9 @@ export class TableBody extends React.Component<TableBodyProps> {
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

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

@ -52,6 +52,7 @@ export class TableCell extends React.Component<TableCellProps> {
children,
width,
align,
vAlign,
innerClassName,
label,
tabIndex,
@ -123,6 +124,13 @@ export class TableCell extends React.Component<TableCellProps> {
};
}
if (vAlign) {
style = {
...style,
verticalAlign: vAlign
};
}
if (column.backgroundScale) {
const backgroundScale = column.backgroundScale;
let min = backgroundScale.min;

15
packages/amis/src/renderers/Table/index.tsx
View File

@ -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<TableProps, object> {
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;
}