chore: 优化 table 编辑器体验支持宽度实时更新 (#7876)

packages/amis-core/src/store/table.ts

@@ -938,12 +938,17 @@ export const TableStore = iRendererStore
         });
 
         const originColumns = self.columns.concat();
-        columns = columns.map((item, index) => ({
+        columns = columns.map((item, index) => {
+          const origin = item.id
+            ? originColumns.find(column => column.id === item.id)
+            : originColumns[index];
+
+          return {
             ...item,
             id: guid(),
             index,
-          width: originColumns[index]?.width || 0,
+            width: origin?.width || 0,
-          minWidth: originColumns[index]?.minWidth || 0,
+            minWidth: origin?.minWidth || 0,
             rawIndex: index - PARTITION_INDEX,
             type: item.type || 'plain',
             pristine: item.pristine || item,
@@ -954,7 +959,8 @@ export const TableStore = iRendererStore
             label: isPureVariable(item.label)
               ? resolveVariableAndFilter(item.label, self.data)
               : item.label
-        }));
+          };
+        });
 
         self.columns.replace(columns as any);
         self.useFixedLayout = self.columns.some(
@@ -968,79 +974,51 @@ export const TableStore = iRendererStore
       if (!table) {
         return;
       }
-      // 自动将 table-layout: auto 改成 fixed
+      const tableWidth = table.parentElement!.offsetWidth;
-      const ths = (
+      const thead = table.querySelector(':scope>thead')!;
-        [].slice.call(
-          table.querySelectorAll(':scope>thead>tr>th[data-index]')
-        ) as HTMLTableCellElement[]
-      ).filter((th, index, arr) => {
-        return (
-          arr.findIndex(
-            item =>
-              item.getAttribute('data-index') === th.getAttribute('data-index')
-          ) === index
-        );
-      });
       const tbodyTr = table.querySelector(':scope>tbody>tr:first-child');
-
       const div = document.createElement('div');
       div.className = 'amis-scope'; // jssdk 里面 css 会在这一层
-      div.style.cssText = `position:absolute;top:0;left:0;pointer-events:none;visibility: hidden;`;
+      div.style.cssText += `visibility: hidden!important;`;
-      div.innerHTML = `<table style="table-layout:auto!important;width:0!important;min-width:0!important;" class="${
+      div.innerHTML =
-        table.className
+        `<table style="table-layout:auto!important;width:0!important;min-width:0!important;" class="${table.className}">${thead.outerHTML}</table>` +
-      }"><thead><tr>${ths
+        `<table style="table-layout:auto!important;min-width:${tableWidth}px!important;width:${tableWidth}px!important;" class="${table.className.replace(
-        .map(
-          th =>
-            `<th style="width:0" data-index="${th.getAttribute(
-              'data-index'
-            )}" class="${th.className}">${th.innerHTML}</th>`
-        )
-        .join(
-          ''
-        )}</tr></thead></table><table style="table-layout:auto!important;min-width:${
-        table.offsetWidth
-      }px!important;" class="${table.className.replace(
           'is-layout-fixed',
           ''
-      )}"><thead><tr>${ths
+        )}">${thead.outerHTML}${
-        .map(th => {
+          tbodyTr ? `<tbody>${tbodyTr.outerHTML}</tbody>` : ''
+        }</table>`;
+      const ths1: Array<HTMLTableCellElement> = [].slice.call(
+        div.querySelectorAll(':scope>table:first-child>thead>tr>th[data-index]')
+      );
+      const ths2: Array<HTMLTableCellElement> = [].slice.call(
+        div.querySelectorAll(':scope>table:last-child>thead>tr>th[data-index]')
+      );
+
+      ths1.forEach(th => {
+        th.style.cssText += 'width: 0';
+      });
+      ths2.forEach(th => {
         const index = parseInt(th.getAttribute('data-index')!, 10);
         const column = self.columns[index];
 
-          return `<th style="${
+        th.style.cssText += `${
           typeof column.pristine.width === 'number'
             ? `width: ${column.pristine.width}px;`
             : column.pristine.width
             ? `width: ${column.pristine.width};`
             : ''
-          }" data-index="${th.getAttribute('data-index')}" class="${
+        }`;
-            th.className
+      });
-          }">${th.innerHTML}</th>`;
-        })
-        .join('')}</tr></thead>${
-        tbodyTr ? `<tbody>${tbodyTr.outerHTML}</tbody>` : ''
-      }</table>`;
       document.body.appendChild(div);
       const minWidths: {
         [propName: string]: number;
       } = {};
-      [].slice
+      ths1.forEach((th: HTMLTableCellElement) => {
-        .call(
-          div.querySelectorAll(
-            ':scope>table:first-child>thead>tr>th[data-index]'
-          )
-        )
-        .forEach((th: HTMLTableCellElement) => {
         minWidths[th.getAttribute('data-index')!] = th.clientWidth;
       });
 
-      [].slice
+      ths2.forEach((col: HTMLElement) => {
-        .call(
-          div.querySelectorAll(
-            ':scope>table:last-child>thead>tr>th[data-index]'
-          )
-        )
-        .forEach((col: HTMLElement) => {
         const index = parseInt(col.getAttribute('data-index')!, 10);
         const column = self.columns[index];
         column.setWidth(

packages/amis-editor-core/src/component/factory.tsx

@@ -153,9 +153,11 @@ export function makeWrapper(
         ref = ref.getWrappedInstance();
       }
 
-      this.editorNode &&
+      if (this.editorNode && isAlive(this.editorNode)) {
-        isAlive(this.editorNode) &&
         this.editorNode.setComponent(ref);
+
+        info.plugin?.componentRef?.(this.editorNode, ref);
+      }
     }
 
     /**

packages/amis-editor-core/src/plugin.ts

@@ -940,6 +940,13 @@ export interface PluginInterface
   ) => Schema | void;
 
   dispose?: () => void;
+
+  /**
+   * 组件 ref 回调，mount 和 unmount 的时候都会调用
+   * @param ref
+   * @returns
+   */
+  componentRef?: (node: EditorNodeType, ref: any) => void;
 }
 
 export interface RendererPluginEvent {

packages/amis-editor/src/plugin/Table.tsx

@@ -32,6 +32,7 @@ import {
   schemaToArray,
   resolveArrayDatasource
 } from '../util';
+import {reaction} from 'mobx';
 
 export class TablePlugin extends BasePlugin {
   static id = 'TablePlugin';
@@ -942,6 +943,26 @@ export class TablePlugin extends BasePlugin {
         }
       });
   }
+
+  unWatchWidthChange: {[propName: string]: () => void} = {};
+  componentRef(node: EditorNodeType, ref: any) {
+    if (ref) {
+      const store = ref.props.store;
+      this.unWatchWidthChange[node.id] = reaction(
+        () =>
+          store.columns.map((column: any) => column.pristine.width).join(','),
+        () => {
+          ref.updateTableInfoLazy(() => {
+            this.manager.store.highlightNodes.forEach(node =>
+              node.calculateHighlightBox()
+            );
+          });
+        }
+      );
+    } else {
+      this.unWatchWidthChange[node.id]?.();
+    }
+  }
 }
 
 registerEditorPlugin(TablePlugin);

packages/amis-editor/src/tpl/common.tsx

@@ -79,27 +79,15 @@ setSchemaTpl('formItemName', {
   // validateOnChange: false
 });
 
-setSchemaTpl('formItemExtraName', {
+setSchemaTpl(
-  className: 'mb-3',
+  'formItemExtraName',
-  type: 'fieldset',
-  body: [
   getSchemaTpl('formItemName', {
-      required: true,
+    required: false,
-      label: '额外字段',
+    label: '结尾字段名',
     name: 'extraName',
-      visibleOn: 'typeof this.extraName === "string"'
+    description: '配置了结尾字段名，该组件将开始和结尾存成两个字段'
-    }),
+  })
-
+);
-    {
-      type: 'switch',
-      label: tipedLabel('存成两个字段', '开启后将选中范围分别存成两个字段'),
-      name: 'extraName',
-      pipeIn: (value: any) => typeof value === 'string',
-      pipeOut: (value: any) => (value ? '' : undefined),
-      inputClassName: 'is-inline'
-    }
-  ]
-});
 
 setSchemaTpl(
   'formItemMode',

packages/amis-ui/scss/_mixins.scss

@@ -203,7 +203,8 @@
   &:hover:active {
     @content;
   }
-  &.active {
+  &.active,
+  &.is-active {
     @content;
   }
 }

packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap

@@ -25,6 +25,7 @@ exports[`doAction:crud reload 1`] = `
           </button>
           <div
             class="cxd-Crud is-loading"
+            style="position: relative;"
           >
             <div
               class="cxd-Table cxd-Crud-body"
@@ -261,6 +262,45 @@ exports[`doAction:crud reload 1`] = `
                 <span />
               </div>
             </div>
+            <div
+              class="resize-sensor"
+              style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+            >
+              
+  
+              <div
+                class="resize-sensor-expand"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-shrink"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -294,6 +334,7 @@ exports[`doAction:crud reload with data1 1`] = `
           </button>
           <div
             class="cxd-Crud is-loading"
+            style="position: relative;"
           >
             <div
               class="cxd-Table cxd-Crud-body"
@@ -530,6 +571,45 @@ exports[`doAction:crud reload with data1 1`] = `
                 <span />
               </div>
             </div>
+            <div
+              class="resize-sensor"
+              style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+            >
+              
+  
+              <div
+                class="resize-sensor-expand"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-shrink"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -563,6 +643,7 @@ exports[`doAction:crud reload with data2 1`] = `
           </button>
           <div
             class="cxd-Crud is-loading"
+            style="position: relative;"
           >
             <div
               class="cxd-Table cxd-Crud-body"
@@ -799,6 +880,45 @@ exports[`doAction:crud reload with data2 1`] = `
                 <span />
               </div>
             </div>
+            <div
+              class="resize-sensor"
+              style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+            >
+              
+  
+              <div
+                class="resize-sensor-expand"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-shrink"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
+            </div>
           </div>
         </div>
       </div>

packages/amis/__tests__/renderers/Form/__snapshots__/inputTable.test.tsx.snap

@@ -224,6 +224,7 @@ exports[`Renderer:input table 1`] = `
                 >
                   <div
                     class="cxd-InputTable cxd-Form-control"
+                    style="position: relative;"
                   >
                     <div
                       class="cxd-Table"
@@ -370,6 +371,45 @@ exports[`Renderer:input table 1`] = `
                         <span />
                       </div>
                     </div>
+                    <div
+                      class="resize-sensor"
+                      style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+                    >
+                      
+  
+                      <div
+                        class="resize-sensor-expand"
+                        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+                      >
+                        
+    
+                        <div
+                          style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                        />
+                        
+  
+                      </div>
+                      
+  
+                      <div
+                        class="resize-sensor-shrink"
+                        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+                      >
+                        
+    
+                        <div
+                          style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                        />
+                        
+  
+                      </div>
+                      
+  
+                      <div
+                        class="resize-sensor-appear"
+                        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+                      />
+                    </div>
                   </div>
                 </div>
               </form>
@@ -550,6 +590,7 @@ exports[`Renderer:input table add 1`] = `
         >
           <div
             class="cxd-InputTable cxd-Form-control"
+            style="position: relative;"
           >
             <div
               class="cxd-Table"
@@ -768,6 +809,45 @@ exports[`Renderer:input table add 1`] = `
                 </span>
               </div>
             </div>
+            <div
+              class="resize-sensor"
+              style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+            >
+              
+  
+              <div
+                class="resize-sensor-expand"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-shrink"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
+            </div>
           </div>
         </div>
       </form>
@@ -882,6 +962,7 @@ exports[`Renderer:input-table cell selects delete 1`] = `
           </label>
           <div
             class="cxd-InputTable cxd-Form-control"
+            style="position: relative;"
           >
             <div
               class="cxd-Table"
@@ -1051,6 +1132,45 @@ exports[`Renderer:input-table cell selects delete 1`] = `
                 <span />
               </div>
             </div>
+            <div
+              class="resize-sensor"
+              style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+            >
+              
+  
+              <div
+                class="resize-sensor-expand"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-shrink"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
+            </div>
           </div>
         </div>
       </form>
@@ -1263,6 +1383,7 @@ exports[`Renderer:input-table with combo column 1`] = `
         >
           <div
             class="cxd-InputTable cxd-Form-control"
+            style="position: relative;"
           >
             <div
               class="cxd-Table"
@@ -1459,6 +1580,45 @@ exports[`Renderer:input-table with combo column 1`] = `
                 <span />
               </div>
             </div>
+            <div
+              class="resize-sensor"
+              style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+            >
+              
+  
+              <div
+                class="resize-sensor-expand"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-shrink"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
+            </div>
           </div>
         </div>
       </form>

packages/amis/__tests__/renderers/__snapshots__/CRUD.test.tsx.snap

@@ -17,6 +17,7 @@ exports[`1. Renderer:crud basic interval headerToolbar footerToolbar 1`] = `
         >
           <div
             class="cxd-Crud"
+            style="position: relative;"
           >
             <div
               class="cxd-Table cxd-Crud-body"
@@ -793,6 +794,45 @@ exports[`1. Renderer:crud basic interval headerToolbar footerToolbar 1`] = `
                 </div>
               </div>
             </div>
+            <div
+              class="resize-sensor"
+              style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+            >
+              
+  
+              <div
+                class="resize-sensor-expand"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-shrink"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -2108,6 +2148,7 @@ exports[`6. Renderer:crud source & alwaysShowPagination 1`] = `
         >
           <div
             class="cxd-Crud"
+            style="position: relative;"
           >
             <div
               class="cxd-Table cxd-Crud-body"
@@ -2601,6 +2642,45 @@ exports[`6. Renderer:crud source & alwaysShowPagination 1`] = `
                 </div>
               </div>
             </div>
+            <div
+              class="resize-sensor"
+              style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+            >
+              
+  
+              <div
+                class="resize-sensor-expand"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-shrink"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -2626,6 +2706,7 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
         >
           <div
             class="cxd-Crud"
+            style="position: relative;"
           >
             <div
               class="cxd-Crud-selection"
@@ -3537,6 +3618,45 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
                 </div>
               </div>
             </div>
+            <div
+              class="resize-sensor"
+              style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+            >
+              
+  
+              <div
+                class="resize-sensor-expand"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-shrink"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
+            </div>
           </div>
         </div>
       </div>

packages/amis/__tests__/renderers/__snapshots__/Pagination.test.tsx.snap

@@ -7,6 +7,7 @@ exports[`Renderer:Pagination 1`] = `
   >
     <div
       class="cxd-PaginationWrapper"
+      style="position: relative;"
     >
       <div
         class="cxd-Pagination-wrap cxd-PaginationWrapper-pager"
@@ -212,6 +213,45 @@ exports[`Renderer:Pagination 1`] = `
           <span />
         </div>
       </div>
+      <div
+        class="resize-sensor"
+        style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+  
+        <div
+          class="resize-sensor-expand"
+          style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+        >
+          
+    
+          <div
+            style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+          />
+          
+  
+        </div>
+        
+  
+        <div
+          class="resize-sensor-shrink"
+          style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+        >
+          
+    
+          <div
+            style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+          />
+          
+  
+        </div>
+        
+  
+        <div
+          class="resize-sensor-appear"
+          style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+        />
+      </div>
     </div>
   </div>
 </div>

packages/amis/__tests__/renderers/__snapshots__/Table.test.tsx.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Renderer:table 1`] = `
-<div>
+<div
+  style="position: relative;"
+>
   <div
     class="cxd-Table"
   >
@@ -325,11 +327,52 @@ exports[`Renderer:table 1`] = `
       <span />
     </div>
   </div>
+  <div
+    class="resize-sensor"
+    style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+  >
+    
+  
+    <div
+      class="resize-sensor-expand"
+      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+    >
+      
+    
+      <div
+        style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+      />
+      
+  
+    </div>
+    
+  
+    <div
+      class="resize-sensor-shrink"
+      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+    >
+      
+    
+      <div
+        style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+      />
+      
+  
+    </div>
+    
+  
+    <div
+      class="resize-sensor-appear"
+      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+    />
+  </div>
 </div>
 `;
 
 exports[`Renderer:table align 1`] = `
-<div>
+<div
+  style="position: relative;"
+>
   <div
     class="cxd-Table"
   >
@@ -676,6 +719,45 @@ exports[`Renderer:table align 1`] = `
       <span />
     </div>
   </div>
+  <div
+    class="resize-sensor"
+    style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+  >
+    
+  
+    <div
+      class="resize-sensor-expand"
+      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+    >
+      
+    
+      <div
+        style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+      />
+      
+  
+    </div>
+    
+  
+    <div
+      class="resize-sensor-shrink"
+      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+    >
+      
+    
+      <div
+        style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+      />
+      
+  
+    </div>
+    
+  
+    <div
+      class="resize-sensor-appear"
+      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+    />
+  </div>
 </div>
 `;
 
@@ -696,6 +778,7 @@ exports[`Renderer:table children 1`] = `
         >
           <div
             class="cxd-Service"
+            style="position: relative;"
           >
             <div
               class="cxd-Table m-b-none"
@@ -1252,6 +1335,45 @@ exports[`Renderer:table children 1`] = `
                 <span />
               </div>
             </div>
+            <div
+              class="resize-sensor"
+              style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+            >
+              
+  
+              <div
+                class="resize-sensor-expand"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-shrink"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -1261,7 +1383,9 @@ exports[`Renderer:table children 1`] = `
 `;
 
 exports[`Renderer:table classNameExpr 1`] = `
-<div>
+<div
+  style="position: relative;"
+>
   <div
     class="cxd-Table"
   >
@@ -1585,11 +1709,52 @@ exports[`Renderer:table classNameExpr 1`] = `
       <span />
     </div>
   </div>
+  <div
+    class="resize-sensor"
+    style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+  >
+    
+  
+    <div
+      class="resize-sensor-expand"
+      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+    >
+      
+    
+      <div
+        style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+      />
+      
+  
+    </div>
+    
+  
+    <div
+      class="resize-sensor-shrink"
+      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+    >
+      
+    
+      <div
+        style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+      />
+      
+  
+    </div>
+    
+  
+    <div
+      class="resize-sensor-appear"
+      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+    />
+  </div>
 </div>
 `;
 
 exports[`Renderer:table column head style className 1`] = `
-<div>
+<div
+  style="position: relative;"
+>
   <div
     class="cxd-Table className"
   >
@@ -1924,6 +2089,45 @@ exports[`Renderer:table column head style className 1`] = `
       <span />
     </div>
   </div>
+  <div
+    class="resize-sensor"
+    style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+  >
+    
+  
+    <div
+      class="resize-sensor-expand"
+      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+    >
+      
+    
+      <div
+        style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+      />
+      
+  
+    </div>
+    
+  
+    <div
+      class="resize-sensor-shrink"
+      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+    >
+      
+    
+      <div
+        style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+      />
+      
+  
+    </div>
+    
+  
+    <div
+      class="resize-sensor-appear"
+      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+    />
+  </div>
 </div>
 `;
 
@@ -1944,6 +2148,7 @@ exports[`Renderer:table combine Renderer:table combineNum only 1`] = `
         >
           <div
             class="cxd-Service"
+            style="position: relative;"
           >
             <div
               class="cxd-Table"
@@ -2456,6 +2661,45 @@ exports[`Renderer:table combine Renderer:table combineNum only 1`] = `
                 <span />
               </div>
             </div>
+            <div
+              class="resize-sensor"
+              style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+            >
+              
+  
+              <div
+                class="resize-sensor-expand"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-shrink"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -2481,6 +2725,7 @@ exports[`Renderer:table combine Renderer:table combineNum with fromIndex 1`] = `
         >
           <div
             class="cxd-Service"
+            style="position: relative;"
           >
             <div
               class="cxd-Table"
@@ -3063,6 +3308,45 @@ exports[`Renderer:table combine Renderer:table combineNum with fromIndex 1`] = `
                 <span />
               </div>
             </div>
+            <div
+              class="resize-sensor"
+              style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+            >
+              
+  
+              <div
+                class="resize-sensor-expand"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-shrink"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -3088,6 +3372,7 @@ exports[`Renderer:table groupName-default 1`] = `
         >
           <div
             class="cxd-Service"
+            style="position: relative;"
           >
             <div
               class="cxd-Table m-b-none"
@@ -3804,6 +4089,45 @@ exports[`Renderer:table groupName-default 1`] = `
                 <span />
               </div>
             </div>
+            <div
+              class="resize-sensor"
+              style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+            >
+              
+  
+              <div
+                class="resize-sensor-expand"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-shrink"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -3829,6 +4153,7 @@ exports[`Renderer:table groupName-middleNoGroupName 1`] = `
         >
           <div
             class="cxd-Service"
+            style="position: relative;"
           >
             <div
               class="cxd-Table m-b-none"
@@ -4549,6 +4874,45 @@ exports[`Renderer:table groupName-middleNoGroupName 1`] = `
                 <span />
               </div>
             </div>
+            <div
+              class="resize-sensor"
+              style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+            >
+              
+  
+              <div
+                class="resize-sensor-expand"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-shrink"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -4574,6 +4938,7 @@ exports[`Renderer:table groupName-startNoGroupName 1`] = `
         >
           <div
             class="cxd-Service"
+            style="position: relative;"
           >
             <div
               class="cxd-Table m-b-none"
@@ -5282,6 +5647,45 @@ exports[`Renderer:table groupName-startNoGroupName 1`] = `
                 <span />
               </div>
             </div>
+            <div
+              class="resize-sensor"
+              style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+            >
+              
+  
+              <div
+                class="resize-sensor-expand"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-shrink"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -5307,6 +5711,7 @@ exports[`Renderer:table groupName-withTpl 1`] = `
         >
           <div
             class="cxd-Service"
+            style="position: relative;"
           >
             <div
               class="cxd-Table m-b-none"
@@ -6023,6 +6428,45 @@ exports[`Renderer:table groupName-withTpl 1`] = `
                 <span />
               </div>
             </div>
+            <div
+              class="resize-sensor"
+              style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+            >
+              
+  
+              <div
+                class="resize-sensor-expand"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-shrink"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -6032,7 +6476,9 @@ exports[`Renderer:table groupName-withTpl 1`] = `
 `;
 
 exports[`Renderer:table isHead fixed 1`] = `
-<div>
+<div
+  style="position: relative;"
+>
   <div
     class="cxd-Table"
   >
@@ -6367,11 +6813,52 @@ exports[`Renderer:table isHead fixed 1`] = `
       <span />
     </div>
   </div>
+  <div
+    class="resize-sensor"
+    style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+  >
+    
+  
+    <div
+      class="resize-sensor-expand"
+      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+    >
+      
+    
+      <div
+        style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+      />
+      
+  
+    </div>
+    
+  
+    <div
+      class="resize-sensor-shrink"
+      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+    >
+      
+    
+      <div
+        style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+      />
+      
+  
+    </div>
+    
+  
+    <div
+      class="resize-sensor-appear"
+      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+    />
+  </div>
 </div>
 `;
 
 exports[`Renderer:table list 1`] = `
-<div>
+<div
+  style="position: relative;"
+>
   <div
     class="cxd-Table"
   >
@@ -7559,5 +8046,44 @@ exports[`Renderer:table list 1`] = `
       <span />
     </div>
   </div>
+  <div
+    class="resize-sensor"
+    style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+  >
+    
+  
+    <div
+      class="resize-sensor-expand"
+      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+    >
+      
+    
+      <div
+        style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+      />
+      
+  
+    </div>
+    
+  
+    <div
+      class="resize-sensor-shrink"
+      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+    >
+      
+    
+      <div
+        style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+      />
+      
+  
+    </div>
+    
+  
+    <div
+      class="resize-sensor-appear"
+      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+    />
+  </div>
 </div>
 `;

packages/amis/src/renderers/Table/index.tsx

@@ -65,6 +65,7 @@ import {isMobile} from 'amis-core';
 import isPlainObject from 'lodash/isPlainObject';
 import omit from 'lodash/omit';
 import ColGroup from './ColGroup';
+import debounce from 'lodash/debounce';
 
 /**
  * 表格列，不指定类型时默认为文本类型。
@@ -513,6 +514,10 @@ export default class Table extends React.Component<TableProps, object> {
   subForms: any = {};
   timer: ReturnType<typeof setTimeout>;
   toDispose: Array<() => void> = [];
+  updateTableInfoLazy = debounce(this.updateTableInfo.bind(this), 250, {
+    trailing: true,
+    leading: false
+  });
 
   constructor(props: TableProps, context: IScopedContext) {
     super(props);
@@ -524,6 +529,7 @@ export default class Table extends React.Component<TableProps, object> {
     this.tableRef = this.tableRef.bind(this);
     this.affixedTableRef = this.affixedTableRef.bind(this);
     this.updateTableInfo = this.updateTableInfo.bind(this);
+    this.updateTableInfoRef = this.updateTableInfoRef.bind(this);
     this.handleAction = this.handleAction.bind(this);
     this.handleCheck = this.handleCheck.bind(this);
     this.handleCheckAll = this.handleCheckAll.bind(this);
@@ -661,6 +667,9 @@ export default class Table extends React.Component<TableProps, object> {
       this.updateAutoFillHeight();
     }
 
+    this.toDispose.push(
+      resizeSensor(currentNode.parentElement!, this.updateTableInfoLazy)
+    );
     const {store, autoGenerateFilter, onSearchableFromInit} = this.props;
 
     // autoGenerateFilter 开启后
@@ -845,6 +854,7 @@ export default class Table extends React.Component<TableProps, object> {
     this.toDispose.forEach(fn => fn());
     this.toDispose = [];
 
+    this.updateTableInfoLazy.cancel();
     formItem && isAlive(formItem) && formItem.setSubStore(null);
     clearTimeout(this.timer);
 
@@ -1169,11 +1179,19 @@ export default class Table extends React.Component<TableProps, object> {
     return store.selectedRows.map(item => item.data);
   }
 
-  updateTableInfo(ref: any) {
+  updateTableInfo(callback?: () => void) {
-    if (!ref) {
+    if (this.resizeLine) {
       return;
     }
     this.props.store.syncTableWidth();
+    callback && setTimeout(callback, 20);
+  }
+
+  updateTableInfoRef(ref: any) {
+    if (!ref) {
+      return;
+    }
+    this.updateTableInfo();
   }
 
   // 当表格滚动是，需要让 affixHeader 部分的表格也滚动
@@ -2850,7 +2868,9 @@ export default class Table extends React.Component<TableProps, object> {
 
           {
             // 利用这个将 table-layout: auto 转成 table-layout: fixed
-            store.columnWidthReady ? null : <span ref={this.updateTableInfo} />
+            store.columnWidthReady ? null : (
+              <span ref={this.updateTableInfoRef} />
+            )
           }
         </div>