anlyyao · Sep 30, 2026 · Oct 30, 2026
@@ -816,7 +816,7 @@ exports[`calendar :base 1`] = `
             </wx-view>
           </wx-view>
           <wx-view
-            class="t-popup__close"
+            class="t-popup__close t-class-close"
             bind:tap="handleClose"
           />
         </wx-view>

@@ -521,7 +521,7 @@ exports[`date-time-picker :base 1`] = `
               </wx-view>
             </wx-view>
             <wx-view
-              class="t-popup__close"
+              class="t-popup__close t-class-close"
               bind:tap="handleClose"
             />
           </wx-view>

@@ -48,7 +48,7 @@ exports[`dialog :base 1`] = `
             />
           </wx-view>
           <wx-view
-            class="t-popup__close"
+            class="t-popup__close t-class-close"
             bind:tap="handleClose"
           />
         </wx-view>

@@ -675,7 +675,7 @@ exports[`dropdown-menu :base 1`] = `
                   class="t-dropdown-item__footer t-class-footer"
                 />
                 <wx-view
-                  class="t-popup__close"
+                  class="t-popup__close t-class-close"
                   bind:tap="handleClose"
                 />
               </wx-view>

@@ -15,10 +15,12 @@ const useCustomNavbarBehavior = Behavior({
     distanceTop: 0,
   },
 
-  lifetimes: {
-    attached() {
-      if (this.properties.usingCustomNavbar) {
+  observers: {
+    usingCustomNavbar(value) {
+      if (value) {
         this.calculateCustomNavbarDistanceTop();
+      } else {
+        this.setData({ distanceTop: 0 });
       }
     },
   },

@@ -200,7 +200,7 @@ exports[`picker :base 1`] = `
           </wx-view>
         </wx-view>
         <wx-view
-          class="t-popup__close"
+          class="t-popup__close t-class-close"
           bind:tap="handleClose"
         />
       </wx-view>

@@ -33,6 +33,7 @@
     padding: 20rpx;
     line-height: 1;
     color: @popup-close-btn-color;
+    font-size: 48rpx;
   }
 
   &--top {

@@ -14,7 +14,7 @@ const name = `${prefix}-popup`;
 
 @wxComponent()
 export default class Popup extends SuperComponent {
-  externalClasses = [`${prefix}-class`, `${prefix}-class-content`];
+  externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-close`];
 
   behaviors = [transition(), useCustomNavbar];
 

@@ -29,8 +29,8 @@
   >
     <slot name="content" />
     <slot />
-    <view class="{{classPrefix}}__close" bind:tap="handleClose">
-      <t-icon name="close" wx:if="{{closeBtn}}" size="64rpx" />
+    <view class="{{classPrefix}}__close {{prefix}}-class-close" bind:tap="handleClose">
+      <t-icon name="close" wx:if="{{closeBtn}}" />
       <slot name="close-btn" class="{{classPrefix}}-slot" />
     </view>
   </view>

@@ -59,6 +59,8 @@ align | String | left | align type。options: left/right/center | N
 cell | String / Function | - | use cell to render table cell。Typescript: `string \| ((params: BaseTableCellParams<T>) => string)` `interface BaseTableCellParams<T extends TableRowData = TableRowData> { row: T; rowIndex: number; col: BaseTableCol<T>; colIndex: number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N
 class-name | String / Object / Array / Function | - | cell classnames。Typescript: `TableColumnClassName<T> \| TableColumnClassName<T>[]` `type TableColumnClassName<T extends TableRowData = TableRowData> = ClassName \| ((context: CellData<T>) => ClassName)` `interface CellData<T extends TableRowData = TableRowData> extends BaseTableCellParams<T> { type: 'th' \| 'td' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N
 col-key | String | - | unique key for column | N
+ellipsis | Boolean / Object / Function | false | ellipsis cell content。Typescript: `boolean \| PopupProps \| { props: PopupProps; content: string }`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N
+ellipsis-title | Boolean / Object / Function | undefinde | ellipsis title content。Typescript: `boolean \| PopupProps \| { props:  PopupProps; content: string }` `interface BaseTableColParams<T> { col: BaseTableCol<T>; colIndex: number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N
 fixed | String | left | fixed current column to left or right。options: left/right | N
 min-width | String / Number | - | add CSS property `min-width` to HTML Element `<col>`，Browsers with [TablesNG](https://docs.google.com/document/d/16PFD1GtMI9Zgwu0jtPaKZJ75Q2wyZ9EZnVbBacOfiNA/preview)  support `minWidth` | N
 width | String / Number | - | column width | N

@@ -45,7 +45,7 @@ toc: false
 
 {{ stripe }}
 
-#### 带边框表格样式
+#### 带边框表格样式（内容超出省略与浮层预览）
 
 {{ bordered }}
 
@@ -113,6 +113,8 @@ align | String | left | 列横向对齐方式。可选项：left/right/center |
 cell | String / Function | - | 自定义单元格渲染。默认使用 `colKey` 的值作为自定义当前列的插槽名称。<br/>如果 `cell` 值类型为 Function 表示以函数形式渲染单元格。优先级高于 `render`。泛型 T 指表格数据类型。TS 类型：`string \| ((params: BaseTableCellParams<T>) => string)` `interface BaseTableCellParams<T extends TableRowData = TableRowData> { row: T; rowIndex: number; col: BaseTableCol<T>; colIndex: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N
 class-name | String / Object / Array / Function | - | 列类名，值类型是 Function 使用返回值作为列类名；值类型不为 Function 时，值用于整列类名（含表头）。泛型 T 指表格数据类型。TS 类型：`TableColumnClassName<T> \| TableColumnClassName<T>[]` `type TableColumnClassName<T extends TableRowData = TableRowData> = ClassName \| ((context: CellData<T>) => ClassName)` `interface CellData<T extends TableRowData = TableRowData> extends BaseTableCellParams<T> { type: 'th' \| 'td' }`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N
 col-key | String | - | 渲染列所需字段，值为 `serial-number` 表示当前列为「序号」列 | N
+ellipsis | Boolean / Object / Function | false | 单元格和表头内容超出时，是否显示省略号。如果仅希望单元格超出省略，可设置 `ellipsisTitle = false`。<br/> 值为 `true`，则超出省略浮层默认显示单元格内容；<br/>值类型为 `Function` 则自定义超出省略浮中层显示的内容。<br/>值类型为 `Object`，则自动透传属性到 Popup 组件，可用于调整弹窗方向等特性。<br/> 同时透传 Popup 属性和自定义浮层内容，请使用 `{ props: { showOverlay: false }, content: () => 'something' }`。<br /> 请注意单元格超出省略的两个基本点：1. 内容元素是内联元素或样式（自定义单元格内容时需特别注意）；2. 内容超出父元素。TS 类型：`boolean \| PopupProps \| { props: PopupProps; content: string }`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N
+ellipsis-title | Boolean / Object / Function | undefinde | 表头内容超出时，是否显示省略号。优先级高于 `ellipsis`。<br/>值为 `true`，则超出省略的浮层默认显示表头全部内容；<br/>值类型为 `Function` 用于自定义超出省略浮层显示的表头内容；<br/>值类型为 `Object`，则自动透传属性到 Popup 组件，可用于调整弹窗方向等特性。<br/> 同时透传 Popup 属性和自定义浮层内容，请使用 `{ props: { showOverlay: false }, content: () => 'something' }`。TS 类型：`boolean \| PopupProps \| { props:  PopupProps; content: string }` `interface BaseTableColParams<T> { col: BaseTableCol<T>; colIndex: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N
 fixed | String | left | 固定列显示位置。可选项：left/right | N
 min-width | String / Number | - | 透传 CSS 属性 `min-width` 到 `<col>` 元素。⚠️ 仅少部分浏览器支持，如：使用 [TablesNG](https://docs.google.com/document/d/16PFD1GtMI9Zgwu0jtPaKZJ75Q2wyZ9EZnVbBacOfiNA/preview) 渲染的 Chrome 浏览器支持 `minWidth` | N
 width | String / Number | - | 列宽，可以作为最小宽度使用。当列宽总和小于 `table` 元素时，浏览器根据宽度设置情况自动分配宽度；当列宽总和大于 `table` 元素，表现为定宽。可以同时调整 `table` 元素的宽度来达到自己想要的效果 | N

@@ -281,6 +281,99 @@ exports[`Table Table bordered demo works fine 1`] = `
 </bordered>
 `;
 
+exports[`Table Table ellipsis demo works fine 1`] = `
+<ellipsis>
+  <t-table
+    cellEmptyContent="-"
+    columns="{{
+      Array [
+        Object {
+          "colKey": "applicant",
+          "ellipsis": Object {
+            "placement": "center",
+            "title": "申请人",
+          },
+          "title": "申请人",
+        },
+        Object {
+          "colKey": "status",
+          "ellipsis": Object {
+            "placement": "bottom",
+            "title": "审批状态",
+          },
+          "ellipsisTitle": true,
+          "title": "审批状态与处理结果",
+        },
+        Object {
+          "colKey": "channel",
+          "ellipsis": Object {
+            "placement": "bottom",
+            "title": "签署方式",
+          },
+          "ellipsisTitle": false,
+          "title": "签署方式",
+        },
+        Object {
+          "colKey": "email",
+          "ellipsis": Object {
+            "placement": "bottom",
+            "title": "邮箱地址",
+          },
+          "ellipsisTitle": Object {
+            "placement": "bottom",
+            "title": "邮箱地址",
+          },
+          "title": "邮箱地址",
+        },
+      ]
+    }}"
+    data="{{
+      Array [
+        Object {
+          "applicant": "贾明（kyrieJia）",
+          "channel": "电子签署（在线完成）",
+          "email": "jiaming.kyrie@example.com",
+          "id": 1,
+          "status": "审批通过，流程已全部走完",
+        },
+        Object {
+          "applicant": "张三（threeZhang）",
+          "channel": "纸质签署（线下邮寄）",
+          "email": "zhangsan.three@example.com",
+          "id": 2,
+          "status": "审批失败，请联系管理员处理",
+        },
+        Object {
+          "applicant": "王芳（fangWang）",
+          "channel": "电子签署（在线完成）",
+          "email": "wangfang.fw@example.com",
+          "id": 3,
+          "status": "审批已过期，需重新发起",
+        },
+        Object {
+          "applicant": "李雷（leiLi）",
+          "channel": "纸质签署（线下邮寄）",
+          "email": "lilei.ll@example.com",
+          "id": 4,
+          "status": "审批中，等待上级确认",
+        },
+        Object {
+          "applicant": "韩梅梅（meiHan）",
+          "channel": "电子签署（在线完成）",
+          "email": "hanmeimei.mm@example.com",
+          "id": 5,
+          "status": "审批通过，流程已全部走完",
+        },
+      ]
+    }}"
+    rowKey="id"
+    showHeader="{{true}}"
+    bind:cell-click="handleCellClick"
+    bind:row-click="handleRowClick"
+  />
+</ellipsis>
+`;
+
 exports[`Table Table rowspan-colspan demo works fine 1`] = `
 <rowspan-colspan>
   <t-table

@@ -5,7 +5,7 @@
 import path from 'path';
 import simulate from 'miniprogram-simulate';
 
-const mapper = ['base', 'bordered', 'rowspan-colspan', 'scroll', 'stripe'];
+const mapper = ['base', 'bordered', 'ellipsis', 'rowspan-colspan', 'scroll', 'stripe'];
 
 describe('Table', () => {
   mapper.forEach((demoName) => {

@@ -0,0 +1,89 @@
+import SkylineBehavior from '@behaviors/skyline.js';
+
+Component({
+  behaviors: [SkylineBehavior],
+  data: {
+    // 组合 ellipsis + ellipsisTitle 的不同形式与取值
+    // 约束：弹出层方向仅 bottom / center；弹出内容为单元格内容；弹出标题为该列表头
+    columns: [
+      // 1. ellipsis 为 Object：整体透传给 Popup（center 弹出 + 列表头作为标题）；content 缺省时回退为单元格内容
+      {
+        colKey: 'applicant',
+        title: '申请人',
+        ellipsis: { placement: 'center', title: '申请人' },
+      },
+      // 2. ellipsis 为 Object + ellipsisTitle 为 true：表头内容也超出省略（优先级高于 ellipsis）；bottom 弹出
+      {
+        colKey: 'status',
+        title: '审批状态与处理结果',
+        ellipsis: { placement: 'bottom', title: '审批状态' },
+        ellipsisTitle: true,
+      },
+      // 3. ellipsis 为 Object + ellipsisTitle 为 false：仅单元格超出省略，表头不省略
+      {
+        colKey: 'channel',
+        title: '签署方式',
+        ellipsis: { placement: 'bottom', title: '签署方式' },
+        ellipsisTitle: false,
+      },
+      // 4. ellipsis 与 ellipsisTitle 均为 Object：单元格浮层与表头浮层均带列表头标题；bottom 弹出
+      {
+        colKey: 'email',
+        title: '邮箱地址',
+        ellipsis: { placement: 'bottom', title: '邮箱地址' },
+        ellipsisTitle: { placement: 'bottom', title: '邮箱地址' },
+      },
+    ],
+    data: [],
+  },
+  lifetimes: {
+    attached() {
+      const data = [
+        {
+          id: 1,
+          applicant: '贾明（kyrieJia）',
+          status: '审批通过，流程已全部走完',
+          channel: '电子签署（在线完成）',
+          email: 'jiaming.kyrie@example.com',
+        },
+        {
+          id: 2,
+          applicant: '张三（threeZhang）',
+          status: '审批失败，请联系管理员处理',
+          channel: '纸质签署（线下邮寄）',
+          email: 'zhangsan.three@example.com',
+        },
+        {
+          id: 3,
+          applicant: '王芳（fangWang）',
+          status: '审批已过期，需重新发起',
+          channel: '电子签署（在线完成）',
+          email: 'wangfang.fw@example.com',
+        },
+        {
+          id: 4,
+          applicant: '李雷（leiLi）',
+          status: '审批中，等待上级确认',
+          channel: '纸质签署（线下邮寄）',
+          email: 'lilei.ll@example.com',
+        },
+        {
+          id: 5,
+          applicant: '韩梅梅（meiHan）',
+          status: '审批通过，流程已全部走完',
+          channel: '电子签署（在线完成）',
+          email: 'hanmeimei.mm@example.com',
+        },
+      ];
+      this.setData({ data });
+    },
+  },
+  methods: {
+    handleRowClick(e) {
+      console.log('[row-click]', e.detail);
+    },
+    handleCellClick(e) {
+      console.log('[cell-click]', e.detail);
+    },
+  },
+});
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-table": "tdesign-miniprogram/table/table"
+  }
+}
@@ -0,0 +1,9 @@
+<t-table
+  row-key="id"
+  columns="{{columns}}"
+  data="{{data}}"
+  show-header="{{true}}"
+  cell-empty-content="-"
+  bind:row-click="handleRowClick"
+  bind:cell-click="handleCellClick"
+/>
@@ -6,6 +6,7 @@
     "bordered": "./bordered",
     "stripe": "./stripe",
     "scroll": "./scroll",
+    "ellipsis": "./ellipsis",
     "rowspan-colspan": "./rowspan-colspan"
   }
 }
@@ -17,6 +17,9 @@
   <t-demo desc="带边框表格" padding>
     <bordered />
   </t-demo>
+  <t-demo desc="单元格超出省略的表格 " padding>
+    <ellipsis />
+  </t-demo>
   <t-demo desc="带合并单元格的表格" padding>
     <rowspan-colspan />
   </t-demo>

@@ -2,6 +2,7 @@
   "component": true,
   "styleIsolation": "apply-shared",
   "usingComponents": {
-    "t-loading": "../loading/loading"
+    "t-loading": "../loading/loading",
+    "t-popup": "../popup/popup"
   }
 }