From 176ff1edd8f89badc36569cd7856dfd8b1a7f841 Mon Sep 17 00:00:00 2001
From: fujianchao <fujianchao@baidu.com>
Date: Wed, 11 Dec 2024 21:02:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85textOverflow=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7=E6=96=87=E6=A1=A3=EF=BC=8C=E4=BF=AE=E5=A4=8D=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/zh-CN/components/table.md                |  1 +
 docs/zh-CN/components/table2.md               | 51 +++++++++++++++++++
 .../amis-ui/scss/components/_popoverable.scss | 10 ++--
 packages/amis/src/renderers/PopOver.tsx       | 10 +---
 .../amis/src/renderers/Table/TableCell.tsx    |  7 ++-
 5 files changed, 65 insertions(+), 14 deletions(-)

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 =
           </Overlay>
         );
       }
-      // 便于外围扩充函数，勿动
       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 =
           <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}
           >
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<TableCellProps> {
       row,
       showBadge,
       itemBadge,
+      textOverflow,
       testIdBuilder,
       ...rest
     } = this.props;
@@ -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>
     );