Merge pull request #1265 from chaishi/20220805_fix_table

add footerSummary to props
Tencent · Aug 10, 2022 · 91667fc · 91667fc
2 parents bda4158 + 0309486
commit 91667fc
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,29 +5,29 @@ toc: false
 docClass: timeline
 ---
 
-## 🌈 0.45.2 `2022-08-09` 
-### 🚀 Features
-- `Pagination`: 极简模式下合并快速跳转与页码跳转控制器 @HQ-Lin ([#1256](https://github.com/Tencent/tdesign-vue/pull/1256))
-- `DatePicker`: 支持周、季度选择器 @HQ-Lin ([#1245](https://github.com/Tencent/tdesign-vue/pull/1245))
-- `Table`
-   - 新增 `cellEmptyContent`，当列数据为空时显示指定值  @chaishi ([#1254](https://github.com/Tencent/tdesign-vue/pull/1254))
-   - 可编辑行功能，新增实例方法 `validate`，支持校验表格内的全部数据 @chaishi ([#1254](https://github.com/Tencent/tdesign-vue/pull/1254))
-- 主题生成器新增字体配置面板 @uyarn ([#1259](https://github.com/Tencent/tdesign-vue/pull/1259))
-- 新增字体相关CSS Token，支持通过CSS Token修改字体相关配置 具体请参考 [font tokens](https://github.com/Tencent/tdesign-common/blob/develop/style/web/theme/_font.less) @uyarn ([#1259](https://github.com/Tencent/tdesign-vue/pull/1259))
-### 🐞 Bug Fixes
-- `ColorPicker`: 优化组件样式 @S-mohan ([#1250](https://github.com/Tencent/tdesign-vue/pull/1250))
-- `Select`
-  - 修复开启虚拟滚动配合自定义面板使用卡顿的问题 @skytt ([#1247](https://github.com/Tencent/tdesign-vue/pull/1247))
-  - 修复使用 `t-opiton` 自定义选项无法动态筛选问题 @skytt ([#1247](https://github.com/Tencent/tdesign-vue/pull/1247))
-  - 修复 `t-opiton` 配合远程搜索使用异常的问题 @skytt ([#1247](https://github.com/Tencent/tdesign-vue/pull/1247))
-  - 修复 `empty` 与 `loadingText` 在传参为 `string` 类型时，包裹元素消失的问题 @skytt ([#1247](https://github.com/Tencent/tdesign-vue/pull/1247))
-  - 修复 `loadingText` slot 失效的问题 @skytt ([#1247](https://github.com/Tencent/tdesign-vue/pull/1247))
-  - 处理 group-option 下 style 和 class 的透传 @skytt ([#1258](https://github.com/Tencent/tdesign-vue/pull/1258))
-- `Table`
-  - 可编辑行功能，提交校验时只校验了第一列 @chaishi ([#1254](https://github.com/Tencent/tdesign-vue/pull/1254))
-  - 可编辑单元格功能，`abortEditOnEvent` 中的事件无法触发`onEdited`，[issue#1188](https://github.com/Tencent/tdesign-vue/issues/1188) @chaishi ([#1254](https://github.com/Tencent/tdesign-vue/pull/1254))
-  - 列配置功能，带边框模式，移除分页组件边框下方多余的边框 @chaishi ([#1254](https://github.com/Tencent/tdesign-vue/pull/1254))
-  - 修复深色模式下垂直和水平方向滚动条交汇处出现白点的样式问题 by @RayJason ([#1259](https://github.com/Tencent/tdesign-vue/pull/1259))
+## 🌈 0.45.2 `2022-08-09` 
+### 🚀 Features
+- `Pagination`: 极简模式下合并快速跳转与页码跳转控制器 @HQ-Lin ([#1256](https://github.com/Tencent/tdesign-vue/pull/1256))
+- `DatePicker`: 支持周、季度选择器 @HQ-Lin ([#1245](https://github.com/Tencent/tdesign-vue/pull/1245))
+- `Table`
+   - 新增 `cellEmptyContent`，当列数据为空时显示指定值  @chaishi ([#1254](https://github.com/Tencent/tdesign-vue/pull/1254))
+   - 可编辑行功能，新增实例方法 `validate`，支持校验表格内的全部数据 @chaishi ([#1254](https://github.com/Tencent/tdesign-vue/pull/1254))
+- 主题生成器新增字体配置面板 @uyarn ([#1259](https://github.com/Tencent/tdesign-vue/pull/1259))
+- 新增字体相关CSS Token，支持通过CSS Token修改字体相关配置 具体请参考 [font tokens](https://github.com/Tencent/tdesign-common/blob/develop/style/web/theme/_font.less) @uyarn ([#1259](https://github.com/Tencent/tdesign-vue/pull/1259))
+### 🐞 Bug Fixes
+- `ColorPicker`: 优化组件样式 @S-mohan ([#1250](https://github.com/Tencent/tdesign-vue/pull/1250))
+- `Select`
+  - 修复开启虚拟滚动配合自定义面板使用卡顿的问题 @skytt ([#1247](https://github.com/Tencent/tdesign-vue/pull/1247))
+  - 修复使用 `t-option` 自定义选项无法动态筛选问题 @skytt ([#1247](https://github.com/Tencent/tdesign-vue/pull/1247))
+  - 修复 `t-option` 配合远程搜索使用异常的问题 @skytt ([#1247](https://github.com/Tencent/tdesign-vue/pull/1247))
+  - 修复 `empty` 与 `loadingText` 在传参为 `string` 类型时，包裹元素消失的问题 @skytt ([#1247](https://github.com/Tencent/tdesign-vue/pull/1247))
+  - 修复 `loadingText` slot 失效的问题 @skytt ([#1247](https://github.com/Tencent/tdesign-vue/pull/1247))
+  - 处理 group-option 下 style 和 class 的透传 @skytt ([#1258](https://github.com/Tencent/tdesign-vue/pull/1258))
+- `Table`
+  - 可编辑行功能，提交校验时只校验了第一列 @chaishi ([#1254](https://github.com/Tencent/tdesign-vue/pull/1254))
+  - 可编辑单元格功能，`abortEditOnEvent` 中的事件无法触发`onEdited`，[issue#1188](https://github.com/Tencent/tdesign-vue/issues/1188) @chaishi ([#1254](https://github.com/Tencent/tdesign-vue/pull/1254))
+  - 列配置功能，带边框模式，移除分页组件边框下方多余的边框 @chaishi ([#1254](https://github.com/Tencent/tdesign-vue/pull/1254))
+  - 修复深色模式下垂直和水平方向滚动条交汇处出现白点的样式问题 by @RayJason ([#1259](https://github.com/Tencent/tdesign-vue/pull/1259))
 
 
 ## 🌈 0.45.1 `2022-08-03` 

diff --git a/src/table/base-table.tsx b/src/table/base-table.tsx
@@ -398,6 +398,7 @@ export default defineComponent({
               rowAttributes={this.rowAttributes}
               rowClassName={this.rowClassName}
               thWidthList={this.thWidthList}
+              footerSummary={this.footerSummary}
               rowspanAndColspanInFooter={this.rowspanAndColspanInFooter}
             ></TFoot>
           </table>
@@ -468,6 +469,7 @@ export default defineComponent({
             columns={columns}
             rowAttributes={this.rowAttributes}
             rowClassName={this.rowClassName}
+            footerSummary={this.footerSummary}
             rowspanAndColspanInFooter={this.rowspanAndColspanInFooter}
           ></TFoot>
         </table>

diff --git a/src/table/tfoot.tsx b/src/table/tfoot.tsx
@@ -27,6 +27,7 @@ export interface TFootProps {
   rowClassName: TdBaseTableProps['rowClassName'];
   // 表尾吸底内容宽度
   thWidthList?: { [colKey: string]: number };
+  footerSummary?: TdBaseTableProps['footerSummary'];
   rowspanAndColspanInFooter: TdBaseTableProps['rowspanAndColspanInFooter'];
 }
 
@@ -42,6 +43,7 @@ export default defineComponent({
     rowAttributes: [Array, Object, Function] as PropType<TFootProps['rowAttributes']>,
     rowClassName: [Array, String, Object, Function] as PropType<TFootProps['rowClassName']>,
     thWidthList: [Object] as PropType<TFootProps['thWidthList']>,
+    footerSummary: [String, Function] as PropType<TFootProps['footerSummary']>,
     rowspanAndColspanInFooter: Function as PropType<TFootProps['rowspanAndColspanInFooter']>,
   },
 
@@ -76,7 +78,7 @@ export default defineComponent({
   render() {
     if (!this.columns) return null;
     const theadClasses = [this.tableFooterClasses.footer, { [this.tableFooterClasses.fixed]: this.isFixedHeader }];
-    const footerDomList = this.footData.map((row, rowIndex) => {
+    const footerDomList = this.footData?.map((row, rowIndex) => {
       const trAttributes = formatRowAttributes(this.rowAttributes, { row, rowIndex, type: 'foot' });
       // 自定义行类名
       const customClasses = formatRowClassNames(