chore: models list re-render

src/components/seal-table/components/table-row.tsx

@@ -33,8 +33,8 @@ const TableRow: React.FC<
   const [loading, setLoading] = useState(false);
   const pollTimer = useRef<any>(null);
   const chunkRequestRef = useRef<any>(null);
-  const childrenRendered = useRef<any>(null);
 
+  console.log('table row====');
   const { updateChunkedList } = useUpdateChunkedList(childrenData, {
     setDataList: setChildrenData
   });
@@ -228,7 +228,11 @@ const TableRow: React.FC<
         {expanded && (
           <div className="expanded-row">
             <Spin spinning={loading}>
-              {childrenData.length ? renderChildrenData() : <Empty></Empty>}
+              {childrenData.length ? (
+                renderChildrenData()
+              ) : (
+                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>
+              )}
             </Spin>
           </div>
         )}

src/components/seal-table/index.tsx

@@ -1,7 +1,7 @@
 import { RightOutlined } from '@ant-design/icons';
 import { Button, Checkbox, Col, Empty, Row, Spin } from 'antd';
 import _ from 'lodash';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import TableHeader from './components/table-header';
 import TableRow from './components/table-row';
 import './styles/index.less';
@@ -21,9 +21,10 @@ const SealTable: React.FC<SealTableProps> = (props) => {
     loadChildren,
     loadChildrenAPI
   } = props;
-
+  console.log('sealtable====');
   const [selectAll, setSelectAll] = useState(false);
   const [indeterminate, setIndeterminate] = useState(false);
+  const tableContent = useRef(null);
 
   useEffect(() => {
     if (rowSelection) {
@@ -121,12 +122,12 @@ const SealTable: React.FC<SealTableProps> = (props) => {
     if (!props.dataSource.length) {
       return (
         <div className="empty-wrapper">
-          <Empty></Empty>
+          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>
         </div>
       );
     }
     return (
-      <div className="seal-table-content">
+      <div className="seal-table-content" ref={tableContent}>
         {props.dataSource.map((item, index) => {
           return (
             <TableRow
@@ -163,4 +164,4 @@ const SealTable: React.FC<SealTableProps> = (props) => {
   );
 };
 
-export default SealTable;
+export default React.memo(SealTable);

src/components/seal-table/types.ts

@@ -36,6 +36,7 @@ export interface SealTableProps {
   renderChildren?: (data: any) => React.ReactNode;
   loadChildren?: (record: any) => Promise<any[]>;
   loadChildrenAPI?: (record: any) => string;
+  contentRendered?: () => void;
   rowKey: string;
 }