fix: 修复 chrome 低版本列设置宽度无效的问题 (#9026)

packages/amis-core/src/utils/browser.ts

@@ -0,0 +1,4 @@
+export const chromeVersion = (function getChromeVersion() {
+  const raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
+  return raw ? parseInt(raw[2], 10) : false;
+})();

packages/amis-core/src/utils/index.ts

@@ -1,6 +1,7 @@
 export * from './api';
 export * from './attachmentAdpator';
 export * from './autobind';
+export * from './browser';
 export * from './ColorScale';
 export * from './columnsSplit';
 export * from './dataMapping';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type {IColumn, ITableStore} from 'amis-core';
+import {chromeVersion, type IColumn, type ITableStore} from 'amis-core';
 import {observer} from 'mobx-react';
 
 export function ColGroup({
@@ -33,6 +33,50 @@ export function ColGroup({
     };
   }, []);
 
+  // 解决 chrome 91 以下版本的设置 colgroup>col 的 width 属性无效的问题
+  // 低版本同时设置 thead>th
+  // The problem is min-width CSS property.
+  // Before Chrome 91, min-width was ignored on COL elements. 91 no longer ignores it.
+  if (typeof chromeVersion === 'number' && chromeVersion < 91) {
+    React.useEffect(() => {
+      if (domRef.current) {
+        const ths = [].slice.call(
+          domRef.current.parentElement!.querySelectorAll(
+            ':scope > thead > tr > th[data-index]'
+          )
+        );
+        ths.forEach((th: HTMLTableCellElement) => {
+          const index = parseInt(th.getAttribute('data-index')!, 10);
+          const column = store.columns[index];
+
+          let style = '';
+          let width: any = -1;
+
+          if (store.columnWidthReady && column.width) {
+            width = column.width;
+          } else if (column.pristine.width) {
+            width = column.pristine.width;
+          }
+
+          if (width === -1) {
+            return;
+          }
+          style += `width: ${
+            // 有可能是百分比
+            typeof width === 'number' ? `${width}px` : width
+          };`;
+
+          if (store.tableLayout === 'auto') {
+            style += `min-width: ${
+              typeof width === 'number' ? `${width}px` : width
+            };`;
+          }
+          th.style.cssText = style;
+        });
+      }
+    }, columns.map(column => column.width).concat(store.columnWidthReady as any));
+  }
+
   return (
     <colgroup ref={domRef}>
       {columns.map(column => {