diff --git a/docs/zh-CN/components/table.md b/docs/zh-CN/components/table.md index dbbd98766fc..c5146570f47 100755 --- a/docs/zh-CN/components/table.md +++ b/docs/zh-CN/components/table.md @@ -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` | ## 事件表 diff --git a/docs/zh-CN/components/table2.md b/docs/zh-CN/components/table2.md index b9b5af8087e..933435e5cfd 100755 --- a/docs/zh-CN/components/table2.md +++ b/docs/zh-CN/components/table2.md @@ -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" @@ -4163,6 +4213,7 @@ order: 67 | searchable | `boolean` \| `Schema` | `false` | 是否可快速搜索 | | width | `number` \| `string` | 列宽 | | remark | | | 提示信息 | +| textOverflow | `string` |`default`| 文本溢出后展示形式,默认换行处理。可选值 `ellipsis` 溢出隐藏展示, `noWrap` 不换行展示(仅在列为静态文本时生效) | ## 事件表 diff --git a/packages/amis-ui/scss/components/_popoverable.scss b/packages/amis-ui/scss/components/_popoverable.scss index d7361c794f6..e229d1ec563 100644 --- a/packages/amis-ui/scss/components/_popoverable.scss +++ b/packages/amis-ui/scss/components/_popoverable.scss @@ -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; diff --git a/packages/amis/src/renderers/PopOver.tsx b/packages/amis/src/renderers/PopOver.tsx index 3fa4b01d479..cbb7fdfdce9 100644 --- a/packages/amis/src/renderers/PopOver.tsx +++ b/packages/amis/src/renderers/PopOver.tsx @@ -365,12 +365,8 @@ export const HocPopOver = ); } - // 便于外围扩充函数,勿动 getClassName() { - const {textOverflow, getClassName} = this.props; - if (getClassName) { - return getClassName(); - } + const {textOverflow} = this.props; return textOverflow === 'default' ? '' : textOverflow; } @@ -413,9 +409,7 @@ export const HocPopOver = diff --git a/packages/amis/src/renderers/Table/TableCell.tsx b/packages/amis/src/renderers/Table/TableCell.tsx index f34dba8e828..cc70d14117a 100644 --- a/packages/amis/src/renderers/Table/TableCell.tsx +++ b/packages/amis/src/renderers/Table/TableCell.tsx @@ -68,6 +68,7 @@ export class TableCell extends React.Component { row, showBadge, itemBadge, + textOverflow, testIdBuilder, ...rest } = this.props; @@ -188,7 +189,11 @@ export class TableCell extends React.Component { /> ) : null} {cellPrefix} - {body} + {textOverflow === 'ellipsis' && width ? ( +
{body}
+ ) : ( + body + )} {cellAffix}
);