fix: table loop render

antdv-demo

@@ -1 +1 @@
-Subproject commit 3978ece8febab44f9007ea66df2adc20d65982c4
+Subproject commit 4a986352a599904cfe895d0df1a8bb794e684645

components/button/button.jsx

@@ -66,7 +66,6 @@ export default {
         sLoading,
         ghost,
         block,
-        icon,
         $attrs,
       } = this;
       const getPrefixCls = this.configProvider.getPrefixCls;
@@ -86,7 +85,7 @@ export default {
         default:
           break;
       }
-      const iconType = sLoading ? 'loading' : icon;
+      const iconType = sLoading ? 'loading' : this.iconCom;
       return {
         [$attrs.class]: $attrs.class,
         [`${prefixCls}`]: true,

components/dropdown/dropdown.jsx

@@ -84,9 +84,9 @@ const Dropdown = {
     const { getPopupContainer: getContextPopupContainer } = this.configProvider;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('dropdown', customizePrefixCls);
-
+    const child = getSlot(this)[0];
-    const dropdownTrigger = cloneElement(getSlot(this), {
+    const dropdownTrigger = cloneElement(child, {
-      class: classNames(this.$attrs?.class, `${prefixCls}-trigger`),
+      class: classNames(child?.props?.class, `${prefixCls}-trigger`),
       disabled,
     });
     const triggerActions = disabled ? [] : trigger;

components/table/FilterDropdownMenuWrapper.jsx

@@ -1,17 +1,3 @@
-// export default {
-//   name: 'FilterDropdownMenuWrapper',
-//   methods: {
-//     handelClick(e) {
-//       e.stopPropagation();
-//       //this.$emit('click', e);
-//     },
-//   },
-//   render() {
-//     const { $slots, handelClick } = this;
-//     return <div onClick={handelClick}>{$slots.default}</div>;
-//   },
-// };
-
 const FilterDropdownMenuWrapper = (_, { attrs, slots }) => {
   return (
     <div class={attrs.class} onClick={e => e.stopPropagation()}>

components/table/filterDropdown.jsx

@@ -134,13 +134,10 @@ export default {
 
     handleConfirm() {
       this.setVisible(false);
-      this.confirmFilter2();
       // Call `setSelectedKeys` & `confirm` in the same time will make filter data not up to date
       // https://github.com/ant-design/ant-design/issues/12284
       this.$forceUpdate();
-      this.$nextTick(() => {
+      this.$nextTick(this.confirmFilter2);
-        this.confirmFilter;
-      });
     },
 
     onVisibleChange(visible) {

components/table/interface.js

@@ -115,13 +115,9 @@ export const TableProps = {
   expandIconAsCell: PropTypes.bool,
   expandIconColumnIndex: PropTypes.number,
   expandRowByClick: PropTypes.bool,
-  // onExpandedRowsChange?: (expandedRowKeys: string[] | number[]) => void;
-  //  onExpand?: (expanded: boolean, record: T) => void;
-  // onChange?: (pagination: PaginationProps | boolean, filters: string[], sorter: Object) => any;
   loading: PropTypes.oneOfType([PropTypes.shape(SpinProps).loose, PropTypes.bool]),
   locale: TableLocale,
   indentSize: PropTypes.number,
-  // onRowClick?: (record: T, index: number, event: Event) => any;
   customRow: PropTypes.func,
   customHeaderRow: PropTypes.func,
   useFixedHeader: PropTypes.bool,
@@ -137,7 +133,10 @@ export const TableProps = {
   getPopupContainer: PropTypes.func,
   expandIcon: PropTypes.func,
   transformCellText: PropTypes.func,
-  // className?: PropTypes.string,
+  onExpandedRowsChange: PropTypes.func,
+  onExpand: PropTypes.func,
+  onChange: PropTypes.func,
+  onRowClick: PropTypes.func,
   // style?: React.CSSProperties;
   // children?: React.ReactNode;
 };
@@ -169,10 +168,10 @@ export const SelectionCheckboxAllProps = {
   getRecordKey: PropTypes.func,
   data: PropTypes.array,
   prefixCls: PropTypes.string,
-  // onSelect: (key: string, index: number, selectFunc: any) => void;
   hideDefaultSelections: PropTypes.bool,
   selections: PropTypes.oneOfType([PropTypes.array, PropTypes.bool]),
   getPopupContainer: PropTypes.func,
+  onSelect: PropTypes.func,
 };
 
 // export interface SelectionCheckboxAllState {

components/vc-table/src/ColumnManager.jsx

@@ -1,6 +1,7 @@
+import { toRaw } from 'vue';
 export default class ColumnManager {
   constructor(columns) {
-    this.columns = columns;
+    this.columns = toRaw(columns);
     this._cached = {};
   }
 
@@ -89,7 +90,7 @@ export default class ColumnManager {
   }
 
   reset(columns) {
-    this.columns = columns;
+    this.columns = toRaw(columns);
     this._cached = {};
   }
 

components/vc-table/src/ExpandableTable.jsx

@@ -233,8 +233,10 @@ const ExpandableTable = {
     const needIndentSpaced = data.some(record => record[childrenColumnName]);
 
     return getSlot(this, 'default', {
-      props,
+      props: {
-      ...this.$attrs,
+        ...props,
+        ...this.$attrs,
+      },
       needIndentSpaced,
       renderRows: this.renderRows,
       handleExpandChange: this.handleExpandChange,

components/vc-table/src/Table.jsx

@@ -88,7 +88,7 @@ export default {
   data() {
     this.preData = [...this.data];
     return {
-      columnManager: new ColumnManager(this.columns),
+      columnManager: markRaw(new ColumnManager(this.columns)),
       sComponents: markRaw(
         merge(
           {
@@ -178,6 +178,7 @@ export default {
 
   mounted() {
     this.$nextTick(() => {
+      console.log(this.ref_headTable);
       if (this.columnManager.isAnyColumnsFixed()) {
         this.handleWindowResize();
         this.resizeEvent = addEventListener(window, 'resize', this.debouncedWindowResize);

components/vc-table/src/TableCell.jsx

@@ -70,9 +70,9 @@ export default {
     let rowSpan;
 
     if (customRender) {
-      text = customRender(text, record, index, column);
+      text = customRender({ text, record, index, column });
       if (isInvalidRenderCellText(text)) {
-        tdProps = text.props || tdProps;
+        tdProps = text.props || text.attrs || tdProps;
         ({ colSpan, rowSpan } = tdProps);
         text = text.children;
       }

components/vc-table/src/TableRow.jsx

@@ -56,6 +56,7 @@ const TableRow = {
 
   data() {
     // this.shouldRender = this.visible
+    this.rowRef = null;
     return {
       shouldRender: this.visible,
     };
@@ -155,17 +156,13 @@ const TableRow = {
 
     saveRowRef() {
       this.rowRef = findDOMNode(this);
-
       const { isAnyColumnsFixed, fixed, expandedRow, ancestorKeys } = this;
-
       if (!isAnyColumnsFixed) {
         return;
       }
-
       if (!fixed && expandedRow) {
         this.setExpandedRowHeight();
       }
-
       if (!fixed && ancestorKeys.length >= 0) {
         this.setRowHeight();
       }

examples/App.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import demo from '../antdv-demo/docs/transfer/demo/basic';
+import demo from '../antdv-demo/docs/table/demo/custom-filter-panel';
 
 export default {
   components: {