feat(table): add summaryData prop #163

vben
1 parent 31ff0559
Showing 8 changed files with 30 additions and 12 deletions
src/components/Table/src/components/TableAction.vue
src/components/Table/src/components/TableFooter.vue
src/components/Table/src/hooks/useDataSource.ts
src/components/Table/src/hooks/useTableFooter.ts
src/components/Table/src/props.ts
src/components/Table/src/types/table.ts
src/layouts/default/header/MultipleHeader.vue
src/views/demo/table/FooterTable.vue
@@ -45,7 +45,7 @@
       const { prefixCls } = useDesign('basic-table-action');
       const table = useTableContext();
       const getActions = computed(() => {
-        return props.actions.map((action) => {
+        return (props.actions || []).map((action) => {
           const { popConfirm } = action;
           return {
             type: 'link',
 <template>
   <Table
-    v-if="summaryFunc"
+    v-if="summaryFunc || summaryData"
     :showHeader="false"
     :bordered="false"
     :pagination="false"
@@ -32,6 +32,9 @@
       summaryFunc: {
         type: Function as PropType<Fn>,
       },
+      summaryData: {
+        type: Array as PropType<Recordable[]>,
+      },
       scroll: {
         type: Object as PropType<Recordable>,
       },
@@ -41,7 +44,11 @@
       const table = useTableContext();
  
       const getDataSource = computed((): Recordable[] => {
-        const { summaryFunc } = props;
+        const { summaryFunc, summaryData } = props;
+        if (summaryData?.length) {
+          summaryData.forEach((item, i) => (item[props.rowKey] = `${i}`));
+          return summaryData;
+        }
         if (!isFunction(summaryFunc)) {
           return [];
         }
@@ -163,11 +163,11 @@ export function useDataSource(
         ...pageParams,
         ...(useSearchForm ? getFieldsValue() : {}),
         ...searchInfo,
-        ...(opt ? opt.searchInfo : {}),
-        ...(opt ? opt.sortInfo : {}),
-        ...(opt ? opt.filterInfo : {}),
+        ...(opt?.searchInfo ?? {}),
         ...sortInfo,
         ...filterInfo,
+        ...(opt?.sortInfo ?? {}),
+        ...(opt?.filterInfo ?? {}),
       };
       if (beforeFetch && isFunction(beforeFetch)) {
         params = beforeFetch(params) || params;
@@ -19,9 +19,9 @@ export function useTableFooter(
   });
  
   const getFooterProps = computed((): Recordable | undefined => {
-    const { summaryFunc, showSummary } = unref(propsRef);
+    const { summaryFunc, showSummary, summaryData } = unref(propsRef);
     return showSummary && !unref(getIsEmptyData)
-      ? () => h(TableFooter, { summaryFunc, scroll: unref(scrollRef) })
+      ? () => h(TableFooter, { summaryFunc, summaryData, scroll: unref(scrollRef) })
       : undefined;
   });
  
@@ -44,6 +44,11 @@ export const basicProps = {
     default: null,
   },
  
+  summaryData: {
+    type: Array as PropType<Recordable[]>,
+    default: null,
+  },
+
   canColDrag: propTypes.bool.def(true),
   api: {
     type: Function as PropType<(...arg: any[]) => Promise<any>>,
@@ -73,7 +78,7 @@ export const basicProps = {
   emptyDataIsShowTable: propTypes.bool.def(true),
   // 额外的请求参数
   searchInfo: {
-    type: Object as PropType<any>,
+    type: Object as PropType<Recordable>,
     default: null,
   },
   // 使用搜索表单
@@ -143,6 +143,8 @@ export interface BasicTableProps&lt;T = any&gt; {
   autoCreateKey?: boolean;
   // 计算合计行的方法
   summaryFunc?: (...arg: any) => Recordable[];
+  // 自定义合计表格内容
+  summaryData?: Recordable[];
   // 是否显示合计行
   showSummary?: boolean;
   // 是否可拖拽列
@@ -70,10 +70,14 @@
       const getPlaceholderDomStyle = computed(
         (): CSSProperties => {
           let height = 0;
-          if ((unref(getShowFullHeaderRef) || !unref(getSplit)) && unref(getShowHeader)) {
+          if (
+            (unref(getShowFullHeaderRef) || !unref(getSplit)) &&
+            unref(getShowHeader) &&
+            !unref(getFullContent)
+          ) {
             height += HEADER_HEIGHT;
           }
-          if (unref(getShowMultipleTab)) {
+          if (unref(getShowMultipleTab) && !unref(getFullContent)) {
             height += TABS_HEIGHT;
           }
           headerHeightRef.value = height;
@@ -13,7 +13,7 @@
   export default defineComponent({
     components: { BasicTable },
     setup() {
-      function handleSummary(tableData: any[]) {
+      function handleSummary(tableData: Recordable[]) {
         const totalNo = tableData.reduce((prev, next) => {
           prev += next.no;
           return prev;