Fix table filter can not show empty data element

examples/drawer/demos/no-mask.vue

@@ -1,6 +1,13 @@
 <template>
   <div>
-    <t-drawer :visible="visible" @close="handleClose" :showOverlay="false" :onConfirm="handleClose" header="抽屉标题">
+    <t-drawer
+      :visible="visible"
+      :showOverlay="false"
+      :onConfirm="handleClose"
+      :preventScrollThrough="false"
+      header="抽屉标题"
+      @close="handleClose"
+    >
       <p>抽屉的内容</p>
     </t-drawer>
 

examples/table/demos/async-loading.vue

@@ -81,14 +81,12 @@ export default {
   },
   computed: {
     loadingNode() {
-      return this.asyncLoading === 'loading-custom'
-        ? this.customLoadingNode
-        : this.asyncLoading;
+      return this.asyncLoading === 'loading-custom' ? this.customLoadingNode : this.asyncLoading;
     },
   },
   methods: {
     customLoadingNode() {
-      return <div class='t-table--loading-async'>这是自定义加载状态和内容</div>;
+      return <div class="t-table__async-loading">这是自定义加载状态和内容</div>;
     },
     onAsyncLoadingClick({ status }) {
       if (status === 'load-more') {

examples/table/table.md

@@ -10,7 +10,6 @@ columns | Array | [] | 列配置，泛型 T 指表格数据类型。TS 类型：
 data | Array | [] | 数据源，泛型 T 指表格数据类型。TS 类型：`Array<T>` | N
 disableDataSort | Boolean | false | 是否禁用本地数据排序。当 `data` 数据长度超过分页大小时，会自动进行本地数据排序。如果 `disabledDataSort` 设置为 true，则无论何时，都不会进行本地排序 | N
 empty | String / Slot / Function | '' | 空表格呈现样式。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-expandedRow | String / Slot / Function | - | 展开行内容，可自定义，泛型 T 指表格数据类型。TS 类型：`string | TNode<{ row: T; index: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 firstFullRow | String / Slot / Function | - | 首行内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 height | String / Number | 'auto' | 表格高度，超出后会出现滚动条。示例：100,  '30%',  '300px'。值为数字类型，会自动加上单位 px | N
 hover | Boolean | false | 是否显示鼠标悬浮状态 | N
@@ -75,7 +74,7 @@ width | String / Number | - | 列宽 | N
 -- | -- | -- | -- | --
 asyncLoading | String / Slot / Function | - | 异步加载状态。值为 `loading` 显示默认文字 “正在加载中，请稍后”，值为 `loading-more` 显示“点击加载更多”，值为其他，表示完全自定义异步加载区域内容。TS 类型：`'loading' | 'load-more' | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 columns | Array | [] | 列配置，泛型 T 指表格数据类型。TS 类型：`Array<PrimaryTableCol<T>>` | N
-dragSort | Boolean | false |【开发中】是否开始拖拽排序，会显示拖拽图标 | N
+dragSort | Boolean | false | 是否开始拖拽排序，会显示拖拽图标 | N
 expandedRow | String / Slot / Function | - | 展开行内容，泛型 T 指表格数据类型。TS 类型：`TNode<{ row: T; index: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 expandedRowKeys | Array | [] | 展开行。支持语法糖。TS 类型：`Array<string | number>` | N
 defaultExpandedRowKeys | Array | [] | 展开行。非受控属性。TS 类型：`Array<string | number>` | N
@@ -89,7 +88,7 @@ multipleSort | Boolean | false | 是否支持多列排序 | N
 selectedRowKeys | Array | - | 选中的行，控制属性。支持语法糖。TS 类型：`Array<string | number>` | N
 defaultSelectedRowKeys | Array | - | 选中的行，控制属性。非受控属性。TS 类型：`Array<string | number>` | N
 showColumnController | Boolean | false | 【开发中】是否显示 自定义显示列控制器 | N
-showDragCol | Boolean | false | 【开发中】是否显示为通过拖拽图标进行排序 | N
+showDragCol | Boolean | false | 【讨论中-待定】是否显示为通过拖拽图标进行排序 | N
 sort | Object / Array | - | 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序。当 `data` 数据长度超过分页大小时，会自动对本地数据 `data` 进行排序，如果不希望对于 `data` 进行排序，可以设置 `disableDatasort = true`。支持语法糖。TS 类型：`TableSort`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
 defaultSort | Object / Array | - | 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序。当 `data` 数据长度超过分页大小时，会自动对本地数据 `data` 进行排序，如果不希望对于 `data` 进行排序，可以设置 `disableDatasort = true`。非受控属性。TS 类型：`TableSort`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
 sortOnRowDraggable | Boolean | false | 允许表格行拖拽时排序 | N
@@ -129,7 +128,7 @@ render | Function | - | 自定义表头或单元格，泛型 T 指表格数据
 sorter | Boolean / Function | false | 该列是否支持排序。值为 true 表示该列支持排序；值类型为函数，表示对本地数据 `data` 进行排序。泛型 T 指表格数据类型。TS 类型：`boolean | SorterFun<T>`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
 sortType | String | all | 当前列支持排序的方式，desc 表示当前列只能进行降序排列；asc 表示当前列只能进行升序排列；all 表示当前列既可升序排列，又可以降序排列。可选项：desc/asc/all。TS 类型：`SortType`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
 title | String / Function | - | 自定义表头渲染。值类型为 Function 表示以函数形式渲染表头。值类型为 string 表示使用插槽渲染，插槽名称为 title 的值。优先级高于 render。TS 类型：`string | TNode<{ col: PrimaryTableCol; colIndex: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-type | String | single | 行选中有两种模式：单选和多选。可选项：single/multiple | N
+type | String | single | 行选中有两种模式：单选和多选。`colKey` 值为 `row-select` 时，表示当前列选中项， `type=single/multiple` 有效。可选项：single/multiple | N
 `Omit<BaseTableCol, 'cell' | 'title' | 'render'>` | - | - | 继承 `Omit<BaseTableCol, 'cell' | 'title' | 'render'>` 中的全部 API | N
 
 ### EnhancedTable Props

src/drawer/drawer.tsx

@@ -87,21 +87,20 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DrawerConfig>('d
       immediate: true,
     },
     visible: {
-      handler(value) {
-        if (value && !this.showInAttachedElement) {
-          this.preventScrollThrough && addClass(document.body, lockClass);
-        } else {
-          this.preventScrollThrough && removeClass(document.body, lockClass);
-        }
+      handler(val) {
+        this.handleScrollThrough(val);
       },
-      immediate: true,
     },
   },
 
   updated() {
     this.updatePushMode();
   },
 
+  mounted() {
+    this.handleScrollThrough(this.visible);
+  },
+
   render() {
     if (this.destroyOnClose && !this.visible) return;
     const defaultCloseBtn = <t-icon-close class="t-submenu-icon"></t-icon-close>;
@@ -132,6 +131,14 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DrawerConfig>('d
   },
 
   methods: {
+    handleScrollThrough(visible: boolean) {
+      if (!document || !document.body || !this.preventScrollThrough) return;
+      if (visible && !this.showInAttachedElement) {
+        this.preventScrollThrough && addClass(document.body, lockClass);
+      } else {
+        this.preventScrollThrough && removeClass(document.body, lockClass);
+      }
+    },
     handlePushMode() {
       if (this.mode !== 'push') return;
       this.$nextTick(() => {

src/table/base-table-props.ts

@@ -2,7 +2,7 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-25 11:57:19
+ * updated at 2022-01-10 09:31:10
  * */
 
 import { TdBaseTableProps } from '../table/type';
@@ -28,10 +28,6 @@ export default {
     type: [String, Function] as PropType<TdBaseTableProps['empty']>,
     default: '',
   },
-  /** 展开行内容，可自定义，泛型 T 指表格数据类型 */
-  expandedRow: {
-    type: [String, Function] as PropType<TdBaseTableProps['expandedRow']>,
-  },
   /** 首行内容 */
   firstFullRow: {
     type: [String, Function] as PropType<TdBaseTableProps['firstFullRow']>,

src/table/base-table/index.tsx

@@ -36,9 +36,7 @@ export default mixins(getConfigReceiverMixins<Vue, TableConfig>('table')).extend
     provider: {
       type: Object,
       default() {
-        return {
-          renderRows(): void {},
-        };
+        return {};
       },
     },
   },

src/table/base-table/table-body.tsx

@@ -1,5 +1,6 @@
 import Vue, { VNode } from 'vue';
 import get from 'lodash/get';
+import camelCase from 'lodash/camelCase';
 import { emitEvent } from '../../utils/event';
 import { prefix } from '../../config';
 import baseTableProps from '../base-table-props';
@@ -28,9 +29,7 @@ export default Vue.extend({
     provider: {
       type: Object,
       default() {
-        return {
-          renderRows(): void {},
-        };
+        return {};
       },
     },
     current: {
@@ -129,13 +128,13 @@ export default Vue.extend({
       return props;
     },
 
-    renderFullRow(type: 'firstFullRow' | 'lastFullRow') {
-      const firstFullRowNode = renderTNodeJSX(this, type);
-      if (firstFullRowNode) {
+    renderFullRow(type: 'first-full-row' | 'last-full-row') {
+      const fullRowNode = renderTNodeJSX(this, camelCase(type));
+      if (fullRowNode) {
         return (
           <tr>
-            <td colspan={this.columns.length} class={`${prefix}-table__row--full`}>
-              {firstFullRowNode}
+            <td colspan={this.columns.length} class={`${prefix}-table__row--full ${prefix}-table__row-${type}`}>
+              {fullRowNode}
             </td>
           </tr>
         );
@@ -148,7 +147,6 @@ export default Vue.extend({
         data,
         rowClassName,
         rowKey,
-        provider,
         $scopedSlots: scopedSlots,
         rowspanAndColspan,
         selectedRowKeys,
@@ -211,19 +209,15 @@ export default Vue.extend({
         rowVnode = <TableRow rowKey={this.rowKey} {...props} />;
         // 按行渲染
         body.push(rowVnode);
-
-        provider.renderRows({
-          rows: body,
-          row,
-          rowIndex: index,
-          columns: this.columns,
-        });
+        // 渲染展开行
+        const expandedRow = this.provider.renderExpandedRow?.({ row, index });
+        expandedRow && (body = body.concat(expandedRow));
       });
-      const firstRow = this.renderFullRow('firstFullRow');
+      const firstRow = this.renderFullRow('first-full-row');
       if (firstRow) {
         body = [firstRow].concat(body);
       }
-      const lastRow = this.renderFullRow('lastFullRow');
+      const lastRow = this.renderFullRow('last-full-row');
       if (lastRow) {
         body = body.concat(lastRow);
       }
@@ -233,7 +227,7 @@ export default Vue.extend({
 
   render() {
     if (this.provider.sortOnRowDraggable) {
-      const className = `${prefix}-table__body ${this.provider.dragging ? 'dragging' : ''}`;
+      const className = `${prefix}-table__body ${this.provider.dragging ? `${prefix}-table__body--dragging` : ''}`;
       return (
         <transition-group class={className} tag="tbody">
           {this.renderBody()}

src/table/enhanced-table-props.ts

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

src/table/primary-table-props.ts

@@ -2,7 +2,7 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-25 11:57:19
+ * updated at 2022-01-10 09:31:10
  * */
 
 import { TdPrimaryTableProps } from '../table/type';
@@ -69,7 +69,7 @@ export default {
   },
   /** 【开发中】是否显示 自定义显示列控制器 */
   showColumnController: Boolean,
-  /** 【开发中】是否显示为通过拖拽图标进行排序 */
+  /** 【讨论中-待定】是否显示为通过拖拽图标进行排序 */
   showDragCol: Boolean,
   /** 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序。当 `data` 数据长度超过分页大小时，会自动对本地数据 `data` 进行排序，如果不希望对于 `data` 进行排序，可以设置 `disableDatasort = true` */
   sort: {

src/table/primary-table/index.tsx

@@ -13,9 +13,9 @@ import rowDraggable from './mixins/row-draggable';
 import filter from './mixins/filter';
 import showColumns from './mixins/show-columns';
 import asyncLoadingMixin from './mixins/async-loading';
-import { RenderExpandRow } from '../util/interface';
 import { PageInfo } from '../../pagination/type';
 import { emitEvent } from '../../utils/event';
+import { renderTNodeJSX } from '../../utils/render-tnode';
 
 type PageChangeContext = Parameters<TdBaseTableProps['onPageChange']>;
 type ChangeContext = Parameters<TdPrimaryTableProps['onChange']>;
@@ -27,9 +27,6 @@ export default mixins(expand, select, sort, rowDraggable, filter, showColumns, a
     ...primaryTableProps,
   },
   computed: {
-    rehandleData(): Array<DataType> {
-      return this.asyncLoadingHandler([...this.data]);
-    },
     rehandleColumns(): Array<PrimaryTableCol> {
       let columns = this.columns.map((col) => ({ ...col }));
       columns = this.getShowColumns([...this.columns]);
@@ -46,14 +43,19 @@ export default mixins(expand, select, sort, rowDraggable, filter, showColumns, a
     }
   },
   methods: {
-    // 提供给 BaseTable 添加渲染 Rows 方法
-    renderRows(params: RenderExpandRow): void {
-      const { row, rowIndex, rows } = params;
-      if (row.colKey === 'async-loading-row') {
-        rows.splice(rowIndex, 1, this.renderAsyncLoadingRow());
-        return;
-      }
-      this.renderExpandedRow(params);
+    // 最后一行，通行数据，可能是异步加载状态，可能是其他
+    renderLastFullRow() {
+      const lastFullRow = renderTNodeJSX(this, 'lastFullRow');
+      const asyncLoadingNode = this.renderAsyncLoadingRow();
+      const nodes = [lastFullRow, asyncLoadingNode].filter((v) => ![undefined, null, false].includes(v));
+      if (nodes.length === 0) return null;
+      if (nodes.length === 1) return nodes[0];
+      return (
+        <div>
+          {nodes[0]}
+          {nodes[1]}
+        </div>
+      );
     },
   },
   render() {
@@ -83,24 +85,20 @@ export default mixins(expand, select, sort, rowDraggable, filter, showColumns, a
     const baseTableProps = {
       props: {
         ...$props,
-        data: this.rehandleData,
         columns: rehandleColumns,
         provider: {
-          renderRows: this.renderRows,
+          renderExpandedRow: this.expandedRow ?? this.$scopedSlots.expandedRow ? this.renderExpandedRow : undefined,
           sortOnRowDraggable: this.sortOnRowDraggable,
           dragging: this.dragging,
         },
         // this.hasFilterCondition is from mixins/filter.tsx
         firstFullRow: this.hasFilterCondition ? this.renderFirstFilterRow : this.firstFullRow,
+        lastFullRow: this.renderLastFullRow,
         empty: this.empty,
       },
       scopedSlots,
       on,
     };
-    // 存在过滤条件，查询结果为空时，不显示空数据节点，有过滤结果行即可
-    if (this.hasFilterCondition) {
-      baseTableProps.props.empty = null;
-    }
     // TODO: 可使用插槽 `topContent` 自定义显示列
     return <BaseTable {...baseTableProps} />;
   },