Skip to content

Commit

Permalink
feat: 补充textOverflow属性文档,修复表格样式问题
Browse files Browse the repository at this point in the history
  • Loading branch information
F-jianchao authored and CheshireJCat committed Dec 12, 2024
1 parent 021e4b4 commit 176ff1e
Show file tree
Hide file tree
Showing 5 changed files with 65 additions and 14 deletions.
1 change: 1 addition & 0 deletions docs/zh-CN/components/table.md
Original file line number Diff line number Diff line change
Expand Up @@ -1874,6 +1874,7 @@ popOver 的其它配置请参考 [popover](./popover)
| align | `left` \| `right` \| `center` \| `justify` | | 单元格对齐方式 | ` 1.4.0` |
| headerAlign | `left` \| `right` \| `center` \| `justify` | | 表头单元格对齐方式 | `6.7.0` |
| vAlign | `top` \| `middle` \| `bottom` | | 单元格垂直对齐方式 | `6.7.0` |
| textOverflow | `string` |`default`| 文本溢出后展示形式,默认换行处理。可选值 `ellipsis` 溢出隐藏展示, `noWrap` 不换行展示(仅在列为静态文本时生效) | `6.10.0` |

## 事件表

Expand Down
51 changes: 51 additions & 0 deletions docs/zh-CN/components/table2.md
Original file line number Diff line number Diff line change
Expand Up @@ -3314,6 +3314,56 @@ order: 67
}
```

可以给列配置上`textOverflow`属性,设置为`ellipsis`,可实现内容超出省略,悬浮查看更多。
可搭配`popOver`属性,来控制弹出框的信息,需要设置图标不展示。

```schema: scope="body"
{
"type": "service",
"api": "/api/sample?perPage=6",
"body": [
{
"type": "table2",
"source": "$rows",
"columns": [
{
"title": "Engine",
"name": "engine",
},
{
"title": "Version",
"name": "version"
},
{
"type": "tpl",
"title": "Browser",
"name": "browser",
"tpl": "${browser+'--'+browser}",
"textOverflow": "ellipsis",
"popOver": {
"trigger": "hover",
"position": "right-top-center-bottom",
"showIcon": false,
"body": {
"type": "tpl",
"tpl": "${browser}"
}
}
},
{
"title": "Badge",
"name": "badgeText"
},
{
"title": "Platform",
"name": "platform"
}
]
}
]
}
```

可以给列配置`popOverEnableOn`属性,该属性为表达式,来控制当前行是否启动`popOver`功能。

```schema: scope="body"
Expand Down Expand Up @@ -4163,6 +4213,7 @@ order: 67
| searchable | `boolean` \| `Schema` | `false` | 是否可快速搜索 |
| width | `number` \| `string` | 列宽 |
| remark | | | 提示信息 |
| textOverflow | `string` |`default`| 文本溢出后展示形式,默认换行处理。可选值 `ellipsis` 溢出隐藏展示, `noWrap` 不换行展示(仅在列为静态文本时生效) |

## 事件表

Expand Down
10 changes: 5 additions & 5 deletions packages/amis-ui/scss/components/_popoverable.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,15 @@
}
}

.#{$ns}TableCell-ellipsis {
display: flex;
align-items: center;
}

.#{$ns}Field--popOverAble {
outline: none;
position: relative;

&--flex {
display: flex;
align-items: center;
}

.#{$ns}Field-popOverWrap {
&-ellipsis {
width: 200px;
Expand Down
10 changes: 2 additions & 8 deletions packages/amis/src/renderers/PopOver.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -365,12 +365,8 @@ export const HocPopOver =
</Overlay>
);
}
// 便于外围扩充函数,勿动
getClassName() {
const {textOverflow, getClassName} = this.props;
if (getClassName) {
return getClassName();
}
const {textOverflow} = this.props;
return textOverflow === 'default' ? '' : textOverflow;
}

Expand Down Expand Up @@ -413,9 +409,7 @@ export const HocPopOver =
<Component
{...this.props}
className={cx(`Field--popOverAble`, className, {
'in': this.state.isOpened,
'Field--popOverAble--flex':
width && selectClassName === 'ellipsis'
in: this.state.isOpened
})}
ref={config.targetOutter ? this.targetRef : undefined}
>
Expand Down
7 changes: 6 additions & 1 deletion packages/amis/src/renderers/Table/TableCell.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ export class TableCell extends React.Component<TableCellProps> {
row,
showBadge,
itemBadge,
textOverflow,
testIdBuilder,
...rest
} = this.props;
Expand Down Expand Up @@ -188,7 +189,11 @@ export class TableCell extends React.Component<TableCellProps> {
/>
) : null}
{cellPrefix}
{body}
{textOverflow === 'ellipsis' && width ? (
<div className={cx(`TableCell-ellipsis`)}>{body}</div>
) : (
body
)}
{cellAffix}
</Component>
);
Expand Down

0 comments on commit 176ff1e

Please sign in to comment.