fix(Table): footer属性内的元素，和Table表格宽度不一致 #621 (#625)

uiwjs · Mar 7, 2022 · 6f54fca · 6f54fca
1 parent 4e0b1b8
commit 6f54fca
Showing 1 changed file with 47 additions and 45 deletions.
diff --git a/packages/react-table/src/index.tsx b/packages/react-table/src/index.tsx
@@ -69,54 +69,56 @@ export default (props: TableProps = {}) => {
   const { header, render, ellipsis } = getLevelItems(columns);
   const keys = getAllColumnsKeys(columns);
   return (
-    <div className={cls} {...other}>
-      <table style={ellipsis ? { tableLayout: 'fixed' } : {}}>
-        {title && <caption>{title}</caption>}
-        {columns && columns.length > 0 && <Thead onCellHead={onCellHead} data={header} />}
-        {data && data.length > 0 && (
-          <tbody>
-            {data.map((trData, rowNum) => (
-              <tr key={rowNum}>
-                {keys.map((keyName, colNum) => {
-                  let objs: React.TdHTMLAttributes<HTMLTableDataCellElement> = {
-                    children: trData[keyName],
-                  };
-                  if (render[keyName]) {
-                    const child = render[keyName](trData[keyName], keyName, trData, rowNum, colNum);
-                    if (React.isValidElement(child)) {
-                      objs.children = child;
-                    } else {
-                      if (child.props) {
-                        objs = { ...child.props, children: objs.children };
-                        if (child.props.rowSpan === 0 || child.props.colSpan === 0) return null;
-                      }
-                      if (child.children) {
-                        objs.children = child.children;
+    <div>
+      <div style={{ overflowY: 'scroll' }} className={cls} {...other}>
+        <table style={ellipsis ? { tableLayout: 'fixed' } : {}}>
+          {title && <caption>{title}</caption>}
+          {columns && columns.length > 0 && <Thead onCellHead={onCellHead} data={header} />}
+          {data && data.length > 0 && (
+            <tbody>
+              {data.map((trData, rowNum) => (
+                <tr key={rowNum}>
+                  {keys.map((keyName, colNum) => {
+                    let objs: React.TdHTMLAttributes<HTMLTableDataCellElement> = {
+                      children: trData[keyName],
+                    };
+                    if (render[keyName]) {
+                      const child = render[keyName](trData[keyName], keyName, trData, rowNum, colNum);
+                      if (React.isValidElement(child)) {
+                        objs.children = child;
+                      } else {
+                        if (child.props) {
+                          objs = { ...child.props, children: objs.children };
+                          if (child.props.rowSpan === 0 || child.props.colSpan === 0) return null;
+                        }
+                        if (child.children) {
+                          objs.children = child.children;
+                        }
                       }
                     }
-                  }
-                  if (ellipsis && ellipsis[keyName]) {
-                    objs.className = `${prefixCls}-ellipsis`;
-                  }
-                  return (
-                    <td {...objs} key={colNum} onClick={(evn) => onCell(trData, { rowNum, colNum, keyName }, evn)} />
-                  );
-                })}
+                    if (ellipsis && ellipsis[keyName]) {
+                      objs.className = `${prefixCls}-ellipsis`;
+                    }
+                    return (
+                      <td {...objs} key={colNum} onClick={(evn) => onCell(trData, { rowNum, colNum, keyName }, evn)} />
+                    );
+                  })}
+                </tr>
+              ))}
+            </tbody>
+          )}
+          {data && data.length === 0 && empty && (
+            <tbody>
+              <tr>
+                <td colSpan={columns.length} style={{ position: 'relative', left: 0 }}>
+                  {empty}
+                </td>
               </tr>
-            ))}
-          </tbody>
-        )}
-        {data && data.length === 0 && empty && (
-          <tbody>
-            <tr>
-              <td colSpan={columns.length} style={{ position: 'relative', left: 0 }}>
-                {empty}
-              </td>
-            </tr>
-          </tbody>
-        )}
-        {props.children}
-      </table>
+            </tbody>
+          )}
+          {props.children}
+        </table>
+      </div>
       {footer && <div className={`${prefixCls}-footer`}>{footer}</div>}
     </div>
   );