Tencent · uyarn · Jan 21, 2022 · Jan 21, 2022 · Jan 21, 2022
@@ -1,6 +1,10 @@
 <template>
   <t-steps :current="1" readonly>
-    <t-step-item title="登录" content="已完成状态" :icon="renderLoginIcon"></t-step-item>
+    <!-- 方式一：使用插槽自定义图标 -->
+    <t-step-item title="登录" content="已完成状态">
+      <t-login-icon slot="icon" />
+    </t-step-item>
+    <!-- 方式二：使用渲染函数 icon 自定义图标 -->
     <t-step-item title="购物" content="进行中状态" :icon="renderCartIcon"></t-step-item>
     <t-step-item title="支付" content="未开始" :icon="renderWalletIcon"></t-step-item>
     <t-step-item title="完成" content="未开始" :icon="renderSuccessIcon"></t-step-item>
@@ -13,10 +17,11 @@ import {
 } from 'tdesign-icons-vue';
 
 export default {
+  components: {
+    TLoginIcon: LoginIcon,
+  },
   methods: {
-    renderLoginIcon() {
-      return <LoginIcon />;
-    },
+    // 如果遇到 h / createElement 函数报错，请给渲染函数添加参数 h。示例：renderCartIcon(h) {}
     renderCartIcon() {
       return <CartIcon />;
     },

@@ -15,7 +15,6 @@
       :bordered="bordered"
       :hover="hover"
     ></t-table>
-
   </div>
 </template>
 <script lang="jsx">

@@ -26,6 +26,7 @@ stripe | Boolean | false | 是否显示斑马纹 | N
 tableLayout | String | fixed | 表格布局方式。可选项：auto/fixed | N
 topContent | String / Slot / Function | - | 表格顶部内容，可以用于自定义列设置等。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 verticalAlign | String | middle | 行内容上下方向对齐。可选项：top/middle/bottom | N
+onCellClick | Function |  | TS 类型：`(context: BaseTableCellEventContext<T>) => void`<br/>单元格点击时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`interface BaseTableCellEventContext<T> { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`<br/> | N
 onPageChange | Function |  | TS 类型：`(pageInfo: PageInfo, newDataSource: Array<T>) => void`<br/>分页发生变化时触发。参数 newDataSource 表示分页后的数据。本地数据进行分页时，newDataSource 和源数据 data 会不一样。泛型 T 指表格数据类型 | N
 onRowClick | Function |  | TS 类型：`(context: RowEventContext<T>) => void`<br/>行点击时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`interface RowEventContext<T> { row: T; index: number; e: MouseEvent }`<br/> | N
 onRowDbClick | Function |  | TS 类型：`(context: RowEventContext<T>) => void`<br/>行双击时触发，泛型 T 指表格数据类型 | N
@@ -41,6 +42,7 @@ onScrollY | Function |  | TS 类型：`(params: { e: WheelEvent }) => void`<br/>
 
 名称 | 参数 | 描述
 -- | -- | --
+cell-click | `(context: BaseTableCellEventContext<T>)` | 单元格点击时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`interface BaseTableCellEventContext<T> { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`<br/>
 page-change | `(pageInfo: PageInfo, newDataSource: Array<T>)` | 分页发生变化时触发。参数 newDataSource 表示分页后的数据。本地数据进行分页时，newDataSource 和源数据 data 会不一样。泛型 T 指表格数据类型
 row-click | `(context: RowEventContext<T>)` | 行点击时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`interface RowEventContext<T> { row: T; index: number; e: MouseEvent }`<br/>
 row-db-click | `(context: RowEventContext<T>)` | 行双击时触发，泛型 T 指表格数据类型
@@ -95,6 +97,7 @@ defaultSort | Object / Array | - | 排序控制。sortBy 排序字段；descendi
 sortOnRowDraggable | Boolean | false | 允许表格行拖拽时排序 | N
 `Omit<BaseTableProps<T>, 'columns'>` | - | - | 继承 `Omit<BaseTableProps<T>, 'columns'>` 中的全部 API | N
 onAsyncLoadingClick | Function |  | TS 类型：`(context: { status: 'loading' | 'load-more' }) => void`<br/>异步加载区域被点击时触发 | N
+onCellClick | Function |  | TS 类型：`(context: PrimaryTableCellEventContext<T>) => void`<br/>单元格点击时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`interface PrimaryTableCellEventContext<T> { row: T; col: PrimaryTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`<br/> | N
 onChange | Function |  | TS 类型：`(data: TableChangeData, context: TableChangeContext<Array<T>>) => void`<br/>分页、排序、过滤等内容变化时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`interface TableChangeData { sorter?: TableSort; filter?: FilterValue; pagination?: PaginationProps }`<br/><br/>`interface TableChangeContext<T> { trigger: TableChangeTrigger; currentData?: T }`<br/><br/>`type TableChangeTrigger = 'filter' | 'sorter' | 'pagination'`<br/> | N
 onDataChange | Function |  | TS 类型：`(data: Array<T>) => void`<br/>表格数据发生变化时触发，比如：本地排序方法 sorter | N
 onDragSort | Function |  | TS 类型：`(context: DragSortContext<T>) => void`<br/>拖拽排序时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`interface DragSortContext<T> { currentIndex: number; current: T; targetIndex: number; target: T }`<br/> | N
@@ -108,6 +111,7 @@ onSortChange | Function |  | TS 类型：`(sort: TableSort, options: SortOptions
 名称 | 参数 | 描述
 -- | -- | --
 async-loading-click | `(context: { status: 'loading' | 'load-more' })` | 异步加载区域被点击时触发
+cell-click | `(context: PrimaryTableCellEventContext<T>)` | 单元格点击时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`interface PrimaryTableCellEventContext<T> { row: T; col: PrimaryTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`<br/>
 change | `(data: TableChangeData, context: TableChangeContext<Array<T>>)` | 分页、排序、过滤等内容变化时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`interface TableChangeData { sorter?: TableSort; filter?: FilterValue; pagination?: PaginationProps }`<br/><br/>`interface TableChangeContext<T> { trigger: TableChangeTrigger; currentData?: T }`<br/><br/>`type TableChangeTrigger = 'filter' | 'sorter' | 'pagination'`<br/>
 data-change | `(data: Array<T>)` | 表格数据发生变化时触发，比如：本地排序方法 sorter
 drag-sort | `(context: DragSortContext<T>)` | 拖拽排序时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`interface DragSortContext<T> { currentIndex: number; current: T; targetIndex: number; target: T }`<br/>

@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2022-01-10 09:31:10
  * */
 
 import { TdBaseTableProps } from '../table/type';
@@ -32,7 +31,7 @@ export default {
   firstFullRow: {
     type: [String, Function] as PropType<TdBaseTableProps['firstFullRow']>,
   },
-  /** 表格高度，超出后会出现滚动条。示例：100,  '30%',  '300px'。值为数字类型，会自动加上单位 px */
+  /** 表格高度，超出后会出现滚动条。示例：100,  '30%',  '300px'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight` */
   height: {
     type: [String, Number] as PropType<TdBaseTableProps['height']>,
     default: 'auto',
@@ -70,6 +69,10 @@ export default {
   rowspanAndColspan: {
     type: Function as PropType<TdBaseTableProps['rowspanAndColspan']>,
   },
+  /** 懒加载和虚拟滚动 */
+  scroll: {
+    type: Object as PropType<TdBaseTableProps['scroll']>,
+  },
   /** 表格尺寸 */
   size: {
     type: String as PropType<TdBaseTableProps['size']>,
@@ -100,6 +103,8 @@ export default {
       return ['top', 'middle', 'bottom'].includes(val);
     },
   },
+  /** 单元格点击时触发 */
+  onCellClick: Function as PropType<TdBaseTableProps['onCellClick']>,
   /** 分页发生变化时触发。参数 newDataSource 表示分页后的数据。本地数据进行分页时，newDataSource 和源数据 data 会不一样。泛型 T 指表格数据类型 */
   onPageChange: Function as PropType<TdBaseTableProps['onPageChange']>,
   /** 行点击时触发，泛型 T 指表格数据类型 */

@@ -162,6 +162,7 @@ export default mixins(getConfigReceiverMixins<Vue, TableConfig>('table')).extend
       const rowEvents = this.registerRowEvents();
       const props = {
         props: {
+          ...this.$props,
           rowKey: this.rowKey,
           data: this.dataSource,
           provider: this.provider,

@@ -44,6 +44,7 @@ export default Vue.extend({
     rowspanAndColspan: baseTableProps.rowspanAndColspan,
     firstFullRow: baseTableProps.firstFullRow,
     lastFullRow: baseTableProps.lastFullRow,
+    onCellClick: baseTableProps.onCellClick,
     onRowHover: baseTableProps.onRowHover,
     onRowMouseup: baseTableProps.onRowMouseup,
     onRowMousedown: baseTableProps.onRowMousedown,

@@ -4,6 +4,8 @@ import Popup from '../../popup';
 import { isNodeOverflow } from '../../utils/dom';
 import { TdInstance } from '../util/interface';
 import { getRecord } from '../util/common';
+import { emitEvent } from '../../utils/event';
+import { TdBaseTableProps } from '../type';
 
 export const ELLIPSIS_CLASS_NAME = `${prefix}-text-ellipsis`;
 
@@ -140,6 +142,17 @@ export default Vue.extend({
         key: colKey,
       },
       style,
+      on: {
+        click: (e: MouseEvent) => {
+          emitEvent<Parameters<TdBaseTableProps['onCellClick']>>(this, 'cell-click', {
+            col,
+            colIndex,
+            row,
+            rowIndex,
+            e,
+          });
+        },
+      },
     };
     let newCellContent = cellContent;
     // 如果被截断给加上 Tooltip 提示

@@ -1,7 +1,7 @@
 import Vue, { VNode, PropType, CreateElement } from 'vue';
 import get from 'lodash/get';
 import { prefix } from '../../config';
-import { BaseTableCol, RowspanColspan } from '../type';
+import { BaseTableCol, RowspanColspan, TdBaseTableProps } from '../type';
 import baseTableProps from '../base-table-props';
 import TableCell from './table-cell';
 import { CustomData, CellData, CellParams } from '../util/interface';
@@ -50,6 +50,7 @@ export default Vue.extend({
       type: Number,
       default: 1,
     },
+    onCellClick: baseTableProps.onCellClick,
     provider: {
       type: Object,
       default() {
@@ -136,7 +137,12 @@ export default Vue.extend({
           customRender,
           type: 'td',
         };
-        rowBody.push(<TableCell cellData={cellData} length={columns.length} />);
+        const on = {
+          'cell-click': (p: Parameters<TdBaseTableProps['onCellClick']>[0]) => {
+            emitEvent<Parameters<TdBaseTableProps['onCellClick']>>(this, 'cell-click', p);
+          },
+        };
+        rowBody.push(<TableCell on={on} cellData={cellData} length={columns.length} />);
       });
       return rowBody;
     },
@@ -150,7 +156,9 @@ export default Vue.extend({
       row: rowData,
       index,
     };
-    const on = {};
+    const on = {
+      ...this.$listeners,
+    };
     Object.keys(eventsName).forEach((event) => {
       const emitEventName = eventsName[event];
       on[event] = (e: MouseEvent) => {

@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2022-01-10 09:31:10
  * */
 
 import { TdEnhancedTableProps } from '../table/type';

@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2022-01-10 09:31:10
  * */
 
 import { TdPrimaryTableProps } from '../table/type';
@@ -83,6 +82,8 @@ export default {
   sortOnRowDraggable: Boolean,
   /** 异步加载区域被点击时触发 */
   onAsyncLoadingClick: Function as PropType<TdPrimaryTableProps['onAsyncLoadingClick']>,
+  /** 单元格点击时触发 */
+  onCellClick: Function as PropType<TdPrimaryTableProps['onCellClick']>,
   /** 分页、排序、过滤等内容变化时触发，泛型 T 指表格数据类型 */
   onChange: Function as PropType<TdPrimaryTableProps['onChange']>,
   /** 表格数据发生变化时触发，比如：本地排序方法 sorter */

@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2022-01-10 09:31:10
  * */
 
 import { PaginationProps, PageInfo } from '../pagination';
@@ -42,7 +41,7 @@ export interface TdBaseTableProps<T extends TableRowData = TableRowData> {
    */
   firstFullRow?: string | TNode;
   /**
-   * 表格高度，超出后会出现滚动条。示例：100,  '30%',  '300px'。值为数字类型，会自动加上单位 px
+   * 表格高度，超出后会出现滚动条。示例：100,  '30%',  '300px'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight`
    * @default 'auto'
    */
   height?: string | number;
@@ -81,6 +80,10 @@ export interface TdBaseTableProps<T extends TableRowData = TableRowData> {
    * 用于自定义合并单元格，泛型 T 指表格数据类型
    */
   rowspanAndColspan?: (params: RowspanAndColspanParams<T>) => RowspanColspan;
+  /**
+   * 懒加载和虚拟滚动
+   */
+  scroll?: TableScroll;
   /**
    * 表格尺寸
    * @default medium
@@ -105,6 +108,10 @@ export interface TdBaseTableProps<T extends TableRowData = TableRowData> {
    * @default middle
    */
   verticalAlign?: 'top' | 'middle' | 'bottom';
+  /**
+   * 单元格点击时触发
+   */
+  onCellClick?: (context: BaseTableCellEventContext<T>) => void;
   /**
    * 分页发生变化时触发。参数 newDataSource 表示分页后的数据。本地数据进行分页时，newDataSource 和源数据 data 会不一样。泛型 T 指表格数据类型
    */
@@ -297,6 +304,10 @@ export interface TdPrimaryTableProps<T extends TableRowData = TableRowData>
    * 异步加载区域被点击时触发
    */
   onAsyncLoadingClick?: (context: { status: 'loading' | 'load-more' }) => void;
+  /**
+   * 单元格点击时触发
+   */
+  onCellClick?: (context: PrimaryTableCellEventContext<T>) => void;
   /**
    * 分页、排序、过滤等内容变化时触发，泛型 T 指表格数据类型
    */
@@ -464,6 +475,27 @@ export interface TableColumnFilter {
   type?: FilterType;
 }
 
+export interface TableScroll {
+  /**
+   * 表示表格除可视区域外，额外渲染的行数，避免表格快速滚动过程中，新出现的内容来不及渲染从而出现空白
+   * @default 20
+   */
+  bufferSize?: number;
+  /**
+   * 表示表格每行内容是否同一个固定高度，仅在 `scroll.type` 为 `virtual` 时有效，该属性设置为 `true` 时，可用于简化虚拟滚动内部计算逻辑，提升性能，此时则需要明确指定 `scroll.rowHeight` 属性的值
+   * @default false
+   */
+  isFixedRowHeight?: boolean;
+  /**
+   * 表格的行高，不会给`<tr>`元素添加样式高度，仅作为滚动时的行高参考。`scroll.type` 为 `lazy` 时，`rowHeight` 用于给未渲染的行节点指定一个初始高度，该属性默认会设置为表格第一行的行高（滚动加载行数量 = 滚动距离 / rowHeight）；`scroll.type` 为 `virtual` 时，`rowHeight` 用于估算每行的大致高度，从而决定应该渲染哪些行，请尽量将该属性设置为表格每行平均高度，从而使得表格滚动过程更加平滑
+   */
+  rowHeight?: number;
+  /**
+   * 表格滚动加载类型，有两种：懒加载和虚拟滚动。值为 `lazy` ，表示表格滚动时会进行懒加载，非可视区域内的表格内容将不会默认渲染，直到该内容可见时，才会进行渲染，并且已渲染的内容滚动到不可见时，不会被销毁；<br />值为`virtual`时，表示表格会进行虚拟滚动，无论滚动条滚动到哪个位置，同一时刻，表格仅渲染该可视区域内的表格内容，当表格需要展示的数据量较大时，建议开启该特性
+   */
+  type: 'lazy' | 'virtual';
+}
+
 export interface RowspanColspan {
   colspan: number;
   rowspan: number;
@@ -476,6 +508,14 @@ export interface RowspanAndColspanParams<T> {
   colIndex: number;
 }
 
+export interface BaseTableCellEventContext<T> {
+  row: T;
+  col: BaseTableCol;
+  rowIndex: number;
+  colIndex: number;
+  e: MouseEvent;
+}
+
 export interface RowEventContext<T> {
   row: T;
   index: number;
@@ -522,6 +562,14 @@ export interface SortInfo {
   descending: boolean;
 }
 
+export interface PrimaryTableCellEventContext<T> {
+  row: T;
+  col: PrimaryTableCol;
+  rowIndex: number;
+  colIndex: number;
+  e: MouseEvent;
+}
+
 export interface TableChangeData {
   sorter?: TableSort;
   filter?: FilterValue;