Some Features and Bug Fix

examples/table/demos/fixed-column.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tdesign-demo-block-column">
+  <div class="tdesign-demo-block-column" style="max-width: 1200px">
     <div>
       <t-radio-group v-model="leftFixedColumn" variant="default-filled">
         <t-radio-button :value="1">左侧固定一列</t-radio-button>
@@ -87,7 +87,7 @@ export default {
         {
           colKey: 'default',
           title: '默认值',
-          width: 150,
+          // width: 150,
         },
         {
           colKey: 'description',

examples/table/demos/tree.vue

@@ -2,6 +2,7 @@
   <div>
     <div>
       <t-button theme="default" @click="setData1">重置数据</t-button>
+      <t-button theme="default" @click="onRowToggle" style="margin-left: 16px">展开/收起可见行</t-button>
     </div>
     <br />
     <!-- 第一列展开树结点，缩进为 24px，子节点字段 childrenKey 默认为 children -->
@@ -189,6 +190,22 @@ export default {
       this.pagination.pageSize = pageInfo.pageSize;
       this.data = getData(pageInfo.current);
     },
+
+    onRowToggle() {
+      const rowIds = [
+        '我是 1_1 号（第 1 页）',
+        '我是 2_1 号（第 1 页）',
+        '我是 3_1 号（第 1 页）',
+        '我是 4_1 号（第 1 页）',
+      ];
+      rowIds.forEach((id) => {
+        // getData 参数为行唯一标识，lodash.get(row, rowKey)
+        const rowData = this.$refs.table.getData(id);
+        this.$refs.table.toggleExpandData(rowData);
+        // 或者
+        // this.$refs.table.toggleExpandData({ rowIndex: rowData.rowIndex, row: rowData.row });
+      });
+    },
   },
 };
 </script>

examples/table/table.md

@@ -13,8 +13,8 @@ empty | String / Slot / Function | '' | 空表格呈现样式，支持全局配
 firstFullRow | String / Slot / Function | - | 首行内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 fixedRows | Array | - | 固定行（冻结行），示例：[M, N]，表示冻结表头 M 行和表尾 N 行。M 和 N 值为 0 时，表示不冻结行。TS 类型：`Array<number>` | N
 footData | Array | [] | 表尾数据源，泛型 T 指表格数据类型。TS 类型：`Array<T>` | N
-headerAffixedTop | Boolean | false | 【开发中】表头吸顶 | N
-headerAffixProps | Object | - | 【开发中】表头吸顶基于 Affix 组件开发，透传全部 Affix 组件属性。TS 类型：`AffixProps`，[Affix API Documents](./affix?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
+headerAffixedTop | Boolean | false | 表头吸顶 | N
+headerAffixProps | Object | - | 表头吸顶基于 Affix 组件开发，透传全部 Affix 组件属性。TS 类型：`AffixProps`，[Affix API Documents](./affix?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
 height | String / Number | - | 表格高度，超出后会出现滚动条。示例：100,  '30%',  '300px'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight` | N
 hover | Boolean | false | 是否显示鼠标悬浮状态 | N
 lastFullRow | String / Slot / Function | - | 尾行内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
@@ -78,7 +78,7 @@ fixed | String | left | 固定列显示位置。可选项：left/right | N
 foot | String / Function | - | 自定义表尾表尾。值类型为 Function 表示以函数形式渲染表尾内容。值类型为 string 表示使用插槽渲染，插槽名称为 `foot` 值。TS 类型：`string | TNode<{ col: BaseTableCol; colIndex: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 render | Function | - | 自定义表头或单元格，泛型 T 指表格数据类型。TS 类型：`TNode<BaseTableRenderParams<T>>` `interface BaseTableRenderParams<T> extends BaseTableCellParams<T> { type: RenderType }` `type RenderType = 'cell' | 'title'`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
 title | String / Function | - | 自定义表头渲染。值类型为 Function 表示以函数形式渲染表头。值类型为 string 表示使用插槽渲染，插槽名称为 title 的值。优先级高于 render。TS 类型：`string | TNode<{ col: BaseTableCol; colIndex: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-width | String / Number | - | 列宽 | N
+width | String / Number | - | 列宽，可以作为最小宽度使用。当列宽总和小于 `table` 元素时，浏览器根据宽度设置情况自动分配宽度；当列宽总和大于 `table` 元素，表现为定宽。可以同时调整 `table` 元素的宽度来达到自己想要的效果 | N
 
 ### PrimaryTable Props
 
@@ -167,6 +167,7 @@ tree | Object | - | 树形结构相关配置。`tree.indent` 表示树结点缩
 getData | `(key: TableRowValue)` | `TableRowState<T>` | 必需。树形结构中，用于获取行数据所有信息。泛型 `T` 表示行数据类型。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`type TableRowValue = string | number`<br/>
 remove | `(key: TableRowValue)` | - | 必需。树形结构中，移除指定节点
 setData | `(key: TableRowValue, newRowData: T)` | - | 必需。树形结构中，用于更新行数据。泛型 `T` 表示行数据类型
+toggleExpandData | `(p: { row: T,  rowIndex: number})` | - | 必需。展开或收起树形行
 
 ### TableRowState
 

src/table/base-table-props.ts

@@ -40,9 +40,9 @@ export default {
     type: Array as PropType<TdBaseTableProps['footData']>,
     default: (): TdBaseTableProps['footData'] => [],
   },
-  /** 【开发中】表头吸顶 */
+  /** 表头吸顶 */
   headerAffixedTop: Boolean,
-  /** 【开发中】表头吸顶基于 Affix 组件开发，透传全部 Affix 组件属性 */
+  /** 表头吸顶基于 Affix 组件开发，透传全部 Affix 组件属性 */
   headerAffixProps: {
     type: Object as PropType<TdBaseTableProps['headerAffixProps']>,
   },

src/table/base-table.tsx

@@ -212,10 +212,11 @@ export default defineComponent({
     const { rowAndColFixedPosition } = this;
     const data = this.isPaginateData ? this.dataSource : this.data;
 
+    const defaultColWidth = this.tableLayout === 'fixed' && this.isWidthOverflow ? '100px' : undefined;
     const colgroup = (
       <colgroup>
         {(this.spansAndLeafNodes?.leafColumns || this.columns).map((col) => (
-          <col key={col.colKey} style={{ width: formatCSSUnit(col.width) }}></col>
+          <col key={col.colKey} style={{ width: formatCSSUnit(col.width) || defaultColWidth }}></col>
         ))}
       </colgroup>
     );
@@ -291,6 +292,7 @@ export default defineComponent({
           />
           <TBody scopedSlots={this.$scopedSlots} props={tableBodyProps} on={on} />
           <TFoot
+            rowKey={this.rowKey}
             scopedSlots={this.$scopedSlots}
             isFixedHeader={this.isFixedHeader}
             rowAndColFixedPosition={rowAndColFixedPosition}

src/table/ellipsis.tsx

@@ -49,54 +49,60 @@ export default defineComponent({
     const { classPrefix } = useConfig();
     const root = ref();
     const isOverflow = ref(false);
+    const visible = ref(false);
 
     const ellipsisClasses = computed(() => [
       `${classPrefix.value}-table__ellipsis`,
       `${classPrefix.value}-text-ellipsis`,
     ]);
 
     // 当表格数据量大时，不希望默认渲染全量的 Popup，期望在用户 mouseenter 的时候再显示
-    const updateIsOverflow = () => {
+    const onTriggerMouseenter = () => {
       if (!root.value) return;
+      visible.value = true;
       isOverflow.value = isNodeOverflow(root.value);
     };
 
-    const onMouseleave = () => {
-      isOverflow.value = false;
+    const onTriggerMouseleave = () => {
+      visible.value = false;
     };
 
     return {
       root,
       isOverflow,
       ellipsisClasses,
-      updateIsOverflow,
-      onMouseleave,
+      visible,
+      onTriggerMouseenter,
+      onTriggerMouseleave,
     };
   },
 
   render() {
     const cellNode = renderContent(this, 'default', 'content');
     const ellipsisContent = (
-      <div
-        ref="root"
-        class={this.ellipsisClasses}
-        onMouseenter={this.updateIsOverflow}
-        onMouseleave={this.onMouseleave}
-      >
+      <div ref="root" class={this.ellipsisClasses}>
         {cellNode}
       </div>
     );
+    let content = null;
     if (this.isOverflow) {
       const rProps = {
         content: this.popupContent || (() => cellNode),
+        visible: this.visible,
         destroyOnClose: true,
         zIndex: this.zIndex,
         attach: this.attach || (() => this.root),
         placement: this.placement,
         ...(this.popupProps || {}),
       };
-      return <TPopup props={rProps}>{ellipsisContent}</TPopup>;
+      content = <TPopup props={rProps}>{ellipsisContent}</TPopup>;
+    } else {
+      content = ellipsisContent;
     }
-    return ellipsisContent;
+    return (
+      <div onMouseenter={this.onTriggerMouseenter} onMouseleave={this.onTriggerMouseleave}>
+        {content}
+      </div>
+    );
   },
 });

src/table/hooks/tree-store.ts

@@ -1,7 +1,7 @@
 import get from 'lodash/get';
 import { isRowSelectedDisabled } from '../utils';
 import {
-  PrimaryTableCol, TableRowState, TableRowValue, PrimaryTableCellParams, TableRowData,
+  PrimaryTableCol, TableRowState, TableRowValue, TableRowData,
 } from '../type';
 import log from '../../_common/js/log';
 
@@ -45,8 +45,12 @@ class TableTreeStore<T extends TableRowData = TableRowData> {
     initialTreeDataMap(this.treeDataMap, dataSource, columns[0], keys);
   }
 
-  toggleExpandData(p: PrimaryTableCellParams<T>, dataSouce: T[], keys: KeysType) {
+  toggleExpandData(p: { rowIndex: number; row: T }, dataSource: T[], keys: KeysType) {
     const rowValue = get(p.row, keys.rowKey);
+    if (rowValue === undefined) {
+      log.error('EnhancedTable', '`rowKey` could be wrong, can not get rowValue from `data` by `rowKey`.');
+      return;
+    }
     const r = this.treeDataMap.get(rowValue) || {
       row: p.row,
       rowIndex: p.rowIndex,
@@ -55,7 +59,7 @@ class TableTreeStore<T extends TableRowData = TableRowData> {
     r.rowIndex = p.rowIndex;
     r.expanded = !r.expanded;
     this.treeDataMap.set(rowValue, r);
-    return this.updateExpandRow(r, dataSouce, keys);
+    return this.updateExpandRow(r, dataSource, keys);
   }
 
   updateExpandRow(changeRow: TableRowState<T>, dataSource: T[], keys: KeysType) {
@@ -223,6 +227,10 @@ export function initialTreeDataMap<T extends TableRowData = TableRowData>(
   for (let i = 0, len = dataSource.length; i < len; i++) {
     const item = dataSource[i];
     const rowValue = get(item, keys.rowKey);
+    if (rowValue === undefined) {
+      log.error('EnhancedTable', '`rowKey` could be wrong, can not get rowValue from `data` by `rowKey`.');
+      return;
+    }
     const state: TableRowState = {
       row: item,
       rowIndex: i,
@@ -234,7 +242,7 @@ export function initialTreeDataMap<T extends TableRowData = TableRowData>(
     state.path = [state];
     treeDataMap.set(rowValue, state);
     const children = get(item, keys.childrenKey);
-    if (column.colKey === 'row-select' && children?.length) {
+    if (children?.length) {
       initialTreeDataMap(treeDataMap, children, column, keys);
     }
   }

src/table/hooks/useDragSort.ts

@@ -4,6 +4,7 @@ import {
   SetupContext, computed, toRefs, ref, watch,
 } from '@vue/composition-api';
 import { SortableEvent } from 'sortablejs';
+import get from 'lodash/get';
 import { TdPrimaryTableProps } from '../type';
 import { TargetDom } from '../interface';
 import { setSortableConfig } from '../utils';
@@ -27,7 +28,7 @@ export default function useDragSort(props: TdPrimaryTableProps, context: SetupCo
   const startList = ref([]);
   watch(data, (newData) => {
     // 更新排列顺序
-    startList.value = newData.map((item) => item[props.rowKey]);
+    startList.value = newData.map((item) => get(item, props.rowKey));
   });
   // 注册拖拽事件
   const registerDragEvent = (element: TargetDom) => {

src/table/hooks/useRowSelect.tsx

@@ -38,24 +38,23 @@ export default function useRowSelect(props: TdPrimaryTableProps) {
   const selectColumn = computed(() => props.columns.find(({ type }) => ['multiple', 'single'].includes(type)));
   const canSelectedRows = computed(() => props.data.filter((row, rowIndex): boolean => !isDisabled(row, rowIndex)));
   // 选中的行，和所有可以选择的行，交集，用于计算 isSelectedAll 和 isIndeterminate
-  const inersectionKeys = computed(() => intersection(
+  const intersectionKeys = computed(() => intersection(
     tSelectedRowKeys.value,
     canSelectedRows.value.map((t) => get(t, props.rowKey || 'id')),
   ));
 
   watch(
     [data, columns, rowClassName, tSelectedRowKeys],
     () => {
-      if (!selectColumn.value) {
-        tRowClassNames.value = rowClassName.value;
-        return;
-      }
-      const disabledRowFunc = selectColumn.value.disabled
-        ? (p: RowClassNameParams<TableRowData>): ClassName => selectColumn.value.disabled(p) ? tableSelectedClasses.disabled : ''
-        : undefined;
+      const disabledRowFunc = (p: RowClassNameParams<TableRowData>): ClassName => selectColumn.value.disabled(p) ? tableSelectedClasses.disabled : '';
+      const disabledRowClass = selectColumn.value?.disabled ? disabledRowFunc : undefined;
       const selected = new Set(tSelectedRowKeys.value);
-      const selectedRowClassFunc = ({ row }: RowClassNameParams<TableRowData>) => selected.has(get(row, props.rowKey || 'id')) ? tableSelectedClasses.selected : '';
-      tRowClassNames.value = [rowClassName.value, disabledRowFunc, selectedRowClassFunc].filter((v) => v);
+      const selectedRowClassFunc = ({ row }: RowClassNameParams<TableRowData>) => {
+        const rowId = get(row, props.rowKey || 'id');
+        return selected.has(rowId) ? tableSelectedClasses.selected : '';
+      };
+      const selectedRowClass = selected.size ? selectedRowClassFunc : undefined;
+      tRowClassNames.value = [rowClassName.value, disabledRowClass, selectedRowClass];
     },
     { immediate: true },
   );
@@ -66,10 +65,10 @@ export default function useRowSelect(props: TdPrimaryTableProps) {
 
   // eslint-disable-next-line
   function getSelectedHeader(h: CreateElement) {
-    const isIndeterminate = inersectionKeys.value.length > 0 && inersectionKeys.value.length < canSelectedRows.value.length;
+    const isIndeterminate = intersectionKeys.value.length > 0 && intersectionKeys.value.length < canSelectedRows.value.length;
     return () => (
       <Checkbox
-        checked={inersectionKeys.value.length === canSelectedRows.value.length}
+        checked={intersectionKeys.value.length === canSelectedRows.value.length}
         indeterminate={isIndeterminate}
         disabled={!canSelectedRows.value.length}
         {...{ on: { change: handleSelectAll } }}

src/table/hooks/useTreeData.tsx

@@ -6,12 +6,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
 import TableTreeStore from './tree-store';
 import {
-  TdEnhancedTableProps,
-  PrimaryTableCol,
-  PrimaryTableCellParams,
-  TableRowData,
-  TableRowValue,
-  TableRowState,
+  TdEnhancedTableProps, PrimaryTableCol, TableRowData, TableRowValue, TableRowState,
 } from '../type';
 import useClassName from './useClassName';
 import { renderCell } from '../tr';
@@ -65,7 +60,11 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC
     return { paddingLeft: `${level * indent || 1}px` };
   }
 
-  function toggleExpandData(p: PrimaryTableCellParams<TableRowData>) {
+  /**
+   * 组件实例方法，展开或收起某一行
+   * @param p 行数据
+   */
+  function toggleExpandData(p: { row: TableRowData; rowIndex: number }) {
     dataSource.value = store.value.toggleExpandData(p, dataSource.value, rowDataKeys.value);
   }
 
@@ -97,7 +96,12 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC
           : AddRectangleIcon;
         return (
           <div class={[tableTreeClasses.col, classes]} style={colStyle}>
-            {!!childrenNodes.length && <IconNode class={tableTreeClasses.icon} onClick={() => toggleExpandData(p)} />}
+            {!!childrenNodes.length && (
+              <IconNode
+                class={tableTreeClasses.icon}
+                onClick={() => toggleExpandData({ row: p.row, rowIndex: p.rowIndex })}
+              />
+            )}
             {cellInfo}
           </div>
         );
@@ -155,6 +159,13 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC
     dataSource.value = store.value.appendTo(key, newData, dataSource.value, rowDataKeys.value);
   }
 
+  /**
+   * 设置展开行层级
+   */
+  // function setExpandedLevel(level: 1 | 2 | 3 | 4 | 5) {
+  //   dataSource.value = store.value.setExpandedLevel(level, dataSource.value, rowDataKeys.value);
+  // }
+
   return {
     store,
     rowDataKeys,
@@ -164,5 +175,7 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC
     remove,
     appendTo,
     formatTreeColum,
+    toggleExpandData,
+    // setExpandedLevel,
   };
 }