feat: 补充textOverflow属性文档，修复表格样式问题

baidu · Dec 11, 2024 · 1eff9ef · 1eff9ef
1 parent 395468b
commit 1eff9ef
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>
     );