fix(table): some bugs

CHANGELOG.md

@@ -80,7 +80,9 @@ docClass: timeline
 
 ## 🌈 0.23.0 `2022-09-27` 
 ### ❗ Breaking Changes
-- `Upload`: `autoUpload=false` 时，增加 `onChange` 事件的触发@chaishi ([#1723](https://github.com/Tencent/tdesign-vue-next/pull/1723))
+- `Upload`: 
+  - `autoUpload=false` 时，增加 `onChange` 事件的触发@chaishi ([#1723](https://github.com/Tencent/tdesign-vue-next/pull/1723))
+  - ⚠️ `formatResponse` 不再对 `file` 对象进行格式化，仅处理 `response` 属性进行处理。如果要扩展 `file` 对象，请在 `onChange` 事件中处理
 
 ### 🚀 Features
 - `Upload`: 

src/table/_example/custom-col-button.vue

@@ -1,17 +1,18 @@
 <template>
   <div class="tdesign-demo-block-column-large">
     <!-- 按钮操作区域 -->
-    <div>
+    <t-space direction="vertical">
       <t-radio-group v-model="placement" variant="default-filled">
         <t-radio-button value="top-left">左上角</t-radio-button>
         <t-radio-button value="top-right">右上角</t-radio-button>
         <t-radio-button value="bottom-left">左下角</t-radio-button>
         <t-radio-button value="bottom-right">右下角</t-radio-button>
       </t-radio-group>
-      <br /><br />
-      <t-checkbox v-model="bordered">是否显示边框</t-checkbox>
-      <t-checkbox v-model="customText">自定义列配置按钮</t-checkbox>
-    </div>
+      <t-space>
+        <t-checkbox v-model="bordered">是否显示边框</t-checkbox>
+        <t-checkbox v-model="customText">自定义列配置按钮</t-checkbox>
+      </t-space>
+    </t-space>
 
     <!-- 1. defaultDisplayColumns = ['platform'] 设置默认显示哪些列，仅第一次有效 -->
     <!-- 2. displayColumns 动态设置显示哪些列，受控属性，支持 displayColumns.sync 语法糖 -->

src/table/_example/drag-sort-handler.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="demo-container t-table-demo-sort">
-    <div>
+    <t-space>
       <t-checkbox v-model="loading"> 加载状态 </t-checkbox>
       <t-button size="small" variant="base" @click="resetData">重置数据</t-button>
-    </div>
+    </t-space>
     <div class="item">
       <!-- 拖拽排序涉及到 data 的变更，相对比较慎重，因此仅支持受控用法 -->
       <t-table

src/table/_example/tree.vue

@@ -29,6 +29,12 @@
       :tree-expand-and-fold-icon="treeExpandIcon"
       :pagination="pagination"
       :before-drag-sort="beforeDragSort"
+      :column-controller="{
+        placement: 'bottom-left',
+        // 允许控制哪些列显示或隐藏
+        fields: ['id', 'platform', 'operate'],
+        dialogProps: { preventScrollThrough: true },
+      }"
       @page-change="onPageChange"
       @abnormal-drag-sort="onAbnormalDragSort"
       @drag-sort="onDragSort"
@@ -127,6 +133,7 @@ function getData(currentPage = 1) {
 const table = ref(null);
 const data = ref(getData());
 const lazyLoadingData = ref(null);
+const displayColumns = ref(['drag', 'id', 'key', 'platform', 'operate']);
 
 const treeConfig = reactive({ childrenKey: 'list', treeNodeColumnIndex: 2, indent: 25 });
 

src/table/ellipsis.tsx

@@ -42,7 +42,7 @@ export default defineComponent({
     overlayClassName: String,
     classPrefix: {
       type: String,
-      default: 't-',
+      default: 't',
     },
   },
 

src/table/enhanced-table.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, SetupContext, computed, ref } from 'vue';
+import { defineComponent, SetupContext, computed, ref, getCurrentInstance } from 'vue';
 import baseTableProps from './base-table-props';
 import primaryTableProps from './primary-table-props';
 import enhancedTableProps from './enhanced-table-props';
@@ -57,30 +57,26 @@ export default defineComponent({
       props.onDragSort?.(params);
     };
 
-    return {
-      store,
-      dataSource,
-      tColumns,
-      tIndeterminateSelectedRowKeys,
-      onDragSortChange,
-      onInnerSelectChange,
-      /** 对外暴露的方法 */
+    context.expose({
+      store: store.value,
+      dataSource: dataSource.value,
       ...treeInstanceFunctions,
-    };
-  },
+    });
 
-  render() {
-    const props = {
-      ...this.$props,
-      data: this.dataSource,
-      columns: this.tColumns,
-      // 半选状态节点
-      indeterminateSelectedRowKeys: this.tIndeterminateSelectedRowKeys,
-      // 树形结构不允许本地数据分页
-      disableDataPage: Boolean(this.tree && Object.keys(this.tree).length),
-      onSelectChange: this.onInnerSelectChange,
-      onDragSort: this.onDragSortChange,
+    return () => {
+      const { vnode } = getCurrentInstance();
+      const enhancedProps = {
+        ...vnode.props,
+        data: dataSource.value,
+        columns: tColumns.value,
+        // 半选状态节点
+        indeterminateSelectedRowKeys: tIndeterminateSelectedRowKeys.value,
+        // 树形结构不允许本地数据分页
+        disableDataPage: Boolean(props.tree && Object.keys(props.tree).length),
+        onSelectChange: onInnerSelectChange,
+        onDragSort: onDragSortChange,
+      };
+      return <PrimaryTable v-slots={context.slots} {...enhancedProps} />;
     };
-    return <PrimaryTable v-slots={this.$slots} {...props} {...this.$attrs} />;
   },
 });

src/table/hooks/useFilter.tsx

@@ -120,12 +120,12 @@ export default function useFilter(props: TdPrimaryTableProps, context: SetupCont
     const filterValue: FilterValue = {
       ...tFilterValue.value,
       [column.colKey]:
+        column.filter.resetValue ??
         {
           single: '',
           multiple: [],
           input: '',
-        }[column.filter.type] ||
-        column.filter.resetValue ||
+        }[column.filter.type] ??
         '',
     };
     emitFilterChange(filterValue, column);

src/table/hooks/useFixed.ts

@@ -495,7 +495,10 @@ export default function useFixed(
       footerAffixedBottom,
       tableContentWidth,
     ],
-    updateThWidthListHandler,
+    () => {
+      updateThWidthListHandler();
+      updateAffixPosition();
+    },
     { immediate: true },
   );
 

src/table/tbody.tsx

@@ -185,7 +185,7 @@ export default defineComponent({
       const trNode = (
         <TrElement
           v-slots={this.$slots}
-          key={`${get(row, this.rowKey || 'id')}__${rowIndex}`}
+          key={get(row, this.rowKey || 'id') || rowIndex}
           {...trProps}
           onRowMounted={this.handleRowMounted}
         ></TrElement>

src/table/tr.tsx

@@ -286,7 +286,7 @@ export default defineComponent({
       const normalAttrs = isFunction(col.attrs) ? col.attrs({ ...params, type: 'td' }) : col.attrs;
       const attrs = { ...normalAttrs, ...cellSpans };
       return (
-        <td key={`${col.colKey}_${colIndex}`} class={classes} style={tdStyles.style} {...attrs} onClick={onClick}>
+        <td key={col.colKey || colIndex} class={classes} style={tdStyles.style} {...attrs} onClick={onClick}>
           {col.ellipsis ? this.renderEllipsisCell(params, { cellNode }) : cellNode}
         </td>
       );