[issues/179] table老的slots写法报警告

[issues/179] 列表页面多了复选框后合计行显示错位问题 #634
 [issues/179] 表格固定列，加了合计后，合计栏前后会发生错位 #622

src/components/Table/src/BasicTable.vue

@@ -18,7 +18,8 @@
     <!-- https://antdv.com/docs/vue/migration-v3-cn -->
     <a-form-item-rest>
       <Table ref="tableElRef" v-bind="getBindValues" :rowClassName="getRowClassName" v-show="getEmptyDataIsShowTable" @resizeColumn="handleResizeColumn" @change="handleTableChange">
-        <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+        <!-- antd的原生插槽直接传递 -->
+        <template #[item]="data" v-for="item in slotNamesGroup.native" :key="item">
           <slot :name="item" v-bind="data || {}"></slot>
         </template>
         <template #headerCell="{ column }">
@@ -29,14 +30,21 @@
         </template>
         <!-- 增加对antdv3.x兼容 -->
         <template #bodyCell="data">
+          <!-- update-begin--author:liaozhiyang---date:220230717---for：【issues-179】antd3 一些警告以及报错(针对表格) -->
+          <template v-if="data.column.slotsBak?.customRender">
+            <slot :name="data.column.slotsBak.customRender" v-bind="data || {}"></slot>
+          </template>
+          <template v-else>
             <slot name="bodyCell" v-bind="data || {}"></slot>
           </template>
+          <!-- update-begin--author:liaozhiyang---date:22030717---for：【issues-179】antd3 一些警告以及报错(针对表格) -->
+        </template>
       </Table>
     </a-form-item-rest>
   </div>
 </template>
 <script lang="ts">
-  import type { BasicTableProps, TableActionType, SizeType, ColumnChangeParam } from './types/table';
+  import type { BasicTableProps, TableActionType, SizeType, ColumnChangeParam, BasicColumn } from './types/table';
 
   import { defineComponent, ref, computed, unref, toRaw, inject, watchEffect } from 'vue';
   import { Table } from 'ant-design-vue';
@@ -216,7 +224,7 @@
 
       const { getHeaderProps } = useTableHeader(getProps, slots, handlers);
 
-      const { getFooterProps } = useTableFooter(getProps, getScrollRef, tableElRef, getDataSourceRef);
+      const { getFooterProps } = useTableFooter(getProps, slots, getScrollRef, tableElRef, getDataSourceRef);
 
       const { getFormProps, replaceFormSlotKey, getFormSlotKeys, handleSearchInfoChange } = useTableForm(getProps, slots, fetch, getLoading);
 
@@ -273,6 +281,8 @@
             [`${prefixCls}-form-container`]: values.useSearchForm,
             [`${prefixCls}--inset`]: values.inset,
             [`${prefixCls}-col-max-width`]: getMaxColumnWidth.value != null,
+            // 是否显示表尾合计
+            [`${prefixCls}--show-summary`]: values.showSummary,
           },
         ];
       });
@@ -325,6 +335,33 @@
       };
       createTableContext({ ...tableAction, wrapRef, getBindValues });
 
+      // update-begin--author:sunjianlei---date:220230718---for：【issues/179】兼容新老slots写法，移除控制台警告
+      // 获取分组之后的slot名称
+      const slotNamesGroup = computed<{
+        // AntTable原生插槽
+        native: string[];
+        // 列自定义插槽
+        custom: string[];
+      }>(() => {
+        const native: string[] = [];
+        const custom: string[] = [];
+        const columns = unref<Recordable[]>(getViewColumns) as BasicColumn[];
+        const allCustomRender = columns.map<string>((column) => column.slotsBak?.customRender);
+        for (const name of Object.keys(slots)) {
+          // 过滤特殊的插槽
+          if (['bodyCell'].includes(name)) {
+            continue;
+          }
+          if (allCustomRender.includes(name)) {
+            custom.push(name);
+          } else {
+            native.push(name);
+          }
+        }
+        return { native, custom };
+      });
+      // update-end--author:sunjianlei---date:220230718---for：【issues/179】兼容新老slots写法，移除控制台警告
+
       expose(tableAction);
 
       emit('register', tableAction, formActions);
@@ -355,7 +392,7 @@
         selectHeaderProps,
         isCustomSelection,
         // update-end--author:sunjianlei---date:220230630---for：【QQYUN-5571】自封装选择列，解决数据行选择卡顿问题
-
+        slotNamesGroup,
       };
     },
   });
@@ -494,5 +531,16 @@
     }
     // ------ 统一设置表格列最大宽度 ------
 
+    // update-begin--author:sunjianlei---date:220230718---for：【issues/622】修复表尾合计错位的问题
+    &--show-summary {
+      .ant-table > .ant-table-footer {
+        padding: 12px 0 0;
+      }
+
+      .ant-table.ant-table-bordered > .ant-table-footer {
+        border: 0;
+      }
+    }
+    // update-end--author:sunjianlei---date:220230718---for：【issues/622】修复表尾合计错位的问题
   }
 </style>

src/components/Table/src/components/TableFooter.vue

@@ -2,7 +2,7 @@
   <Table
     v-if="summaryFunc || summaryData"
     :showHeader="false"
-    :bordered="false"
+    :bordered="bordered"
     :pagination="false"
     :dataSource="getDataSource"
     :rowKey="(r) => r[rowKey]"
@@ -28,6 +28,10 @@
     name: 'BasicTableFooter',
     components: { Table },
     props: {
+      bordered: {
+        type: Boolean,
+        default: false,
+      },
       summaryFunc: {
         type: Function as PropType<Fn>,
       },
@@ -38,6 +42,8 @@
         type: Object as PropType<Recordable>,
       },
       rowKey: propTypes.string.def('key'),
+      // 是否有展开列
+      hasExpandedRow: propTypes.bool,
     },
     setup(props) {
       const table = useTableContext();
@@ -66,8 +72,14 @@
         const hasRowSummary = dataSource.some((item) => Reflect.has(item, SUMMARY_ROW_KEY));
         const hasIndexSummary = dataSource.some((item) => Reflect.has(item, SUMMARY_INDEX_KEY));
 
+        // 是否有序号列
+        let hasIndexCol = false;
+        // 是否有选择列
+        let hasSelection = table.getRowSelection() && hasRowSummary
+
         if (index !== -1) {
           if (hasIndexSummary) {
+            hasIndexCol = true;
             columns[index].customRender = ({ record }) => record[SUMMARY_INDEX_KEY];
             columns[index].ellipsis = false;
           } else {
@@ -75,15 +87,27 @@
           }
         }
 
-        if (table.getRowSelection() && hasRowSummary) {
+        if (hasSelection) {
           const isFixed = columns.some((col) => col.fixed === 'left');
           columns.unshift({
-            width: 60,
+            width: 50,
             title: 'selection',
             key: 'selectionKey',
             align: 'center',
             ...(isFixed ? { fixed: 'left' } : {}),
-            customRender: ({ record }) => record[SUMMARY_ROW_KEY],
+            customRender: ({ record }) => hasIndexCol ? '' : record[SUMMARY_ROW_KEY],
+          });
+        }
+
+        if (props.hasExpandedRow) {
+          const isFixed = columns.some((col) => col.fixed === 'left');
+          columns.unshift({
+            width: 50,
+            title: 'expandedRow',
+            key: 'expandedRowKey',
+            align: 'center',
+            ...(isFixed ? { fixed: 'left' } : {}),
+            customRender: () => '',
           });
         }
         return columns;

src/components/Table/src/hooks/useColumns.ts

@@ -99,7 +99,7 @@ function handleActionColumn(propsRef: ComputedRef<BasicTableProps>, columns: Bas
 export function useColumns(
   propsRef: ComputedRef<BasicTableProps>,
   getPaginationRef: ComputedRef<boolean | PaginationProps>,
-  handleCustomSelectColumn: Fn,
+  handleCustomSelectColumn: Fn
 ) {
   const columnsRef = ref(unref(propsRef).columns) as unknown as Ref<BasicColumn[]>;
   let cacheColumns = unref(propsRef).columns;
@@ -150,6 +150,14 @@ export function useColumns(
         return hasPermission(column.auth) && isIfShow(column);
       })
       .map((column) => {
+        // update-begin--author:liaozhiyang---date:20230718---for: 【issues-179】antd3 一些警告以及报错(针对表格)
+        if(column.slots?.customRender) {
+          // slots的备份，兼容老的写法，转成新写法避免控制台警告
+          column.slotsBak = column.slots;
+          delete column.slots;
+        }
+        // update-end--author:liaozhiyang---date:20230718---for: 【issues-179】antd3 一些警告以及报错(针对表格)
+
         const { slots, customRender, format, edit, editRow, flag, title: metaTitle } = column;
 
         if (!slots || !slots?.title) {

src/components/Table/src/hooks/useTableFooter.ts

@@ -1,4 +1,4 @@
-import type { ComputedRef, Ref } from 'vue';
+import type { ComputedRef, Ref, Slots } from 'vue';
 import type { BasicTableProps } from '../types/table';
 import { unref, computed, h, nextTick, watchEffect } from 'vue';
 import TableFooter from '../components/TableFooter.vue';
@@ -6,6 +6,7 @@ import { useEventListener } from '/@/hooks/event/useEventListener';
 
 export function useTableFooter(
   propsRef: ComputedRef<BasicTableProps>,
+  slots: Slots,
   scrollRef: ComputedRef<{
     x: string | number | true;
     y: Nullable<number>;
@@ -18,9 +19,18 @@ export function useTableFooter(
     return (unref(getDataSourceRef) || []).length === 0;
   });
 
+  // 是否有展开行
+  const hasExpandedRow = computed(() => Object.keys(slots).includes('expandedRowRender'))
+
   const getFooterProps = computed((): Recordable | undefined => {
-    const { summaryFunc, showSummary, summaryData } = unref(propsRef);
+    const { summaryFunc, showSummary, summaryData, bordered } = unref(propsRef);
-    return showSummary && !unref(getIsEmptyData) ? () => h(TableFooter, { summaryFunc, summaryData, scroll: unref(scrollRef) }) : undefined;
+    return showSummary && !unref(getIsEmptyData) ? () => h(TableFooter, {
+      bordered,
+      summaryFunc,
+      summaryData,
+      scroll: unref(scrollRef),
+      hasExpandedRow: hasExpandedRow.value
+    }) : undefined;
   });
 
   watchEffect(() => {

src/components/Table/src/types/table.ts

@@ -425,6 +425,8 @@ export interface BasicColumn extends ColumnProps {
   customTitle?: VueNode;
 
   slots?: Recordable;
+  // slots的备份，兼容老的写法，转成新写法避免控制台警告
+  slotsBak?: Recordable;
 
   // Whether to hide the column by default, it can be displayed in the column configuration
   defaultHidden?: boolean;