From d20b5e8c60c9955791c69e3706df4cdc1078e3d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B4=94=E5=85=B0=E9=91=AB?= <1192065030@qq.com>
Date: Fri, 18 Mar 2022 12:10:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(Table):=20Table=20=E6=B7=BB=E5=8A=A0=20scr?=
=?UTF-8?q?oll=20=E5=B1=9E=E6=80=A7=EF=BC=8C=E8=A7=A3=E5=86=B3=E8=A1=A8?=
=?UTF-8?q?=E6=A0=BC=E5=86=97=E4=BD=99=20div=20fix=20#687=20(#690)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
packages/react-table/README.md | 62 +++++++++++++++++++++++++++-
packages/react-table/src/TableTr.tsx | 4 +-
packages/react-table/src/index.tsx | 31 +++++++++++---
3 files changed, 88 insertions(+), 9 deletions(-)
diff --git a/packages/react-table/README.md b/packages/react-table/README.md
index 9e2dab1954..d9c45704d7 100644
--- a/packages/react-table/README.md
+++ b/packages/react-table/README.md
@@ -65,7 +65,6 @@ const Demo = () => (
);
ReactDOM.render(, _mount_);
```
-
### 表头分组
表头分组通过 `columns` 数组中对象的 `children` 来实现，以渲染分组表头。。
@@ -814,6 +813,66 @@ const Demo = () => {
ReactDOM.render(, _mount_);
```
+### 表格列过宽导致 footer 滑动出表格底部
+
+使用 scroll 属性给表格设置宽(x)或高(y)即可
+
+
+```jsx
+import ReactDOM from 'react-dom';
+import { Table, Button } from 'uiw';
+
+const columns = [
+ {
+ // title: '姓名',
+ ellipsis: true,
+ width: 1000,
+ title: ({ key }) => {
+ return (
+ 字段: {key}
+ )
+ },
+ key: 'name',
+ }, {
+ title: '年龄',
+ style: { color: 'red' },
+ key: 'age',
+ }, {
+ title: '地址',
+ key: 'info',
+ }, {
+ title: '操作',
+ key: 'edit',
+ width: 98,
+ render: (text, key, rowData, rowNumber, columnNumber) => (
+
+
+
+
+ ),
+ },
+];
+const dataSource = [
+ { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。', edit: '' },
+ { name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', edit: '' },
+ { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', edit: '' },
+ { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。', edit: '' },
+ { name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。', edit: '' },
+ { name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班', edit: '' },
+ { name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。', edit: '' },
+];
+const Demo = () => (
+
+
这个是footer}
+ columns={columns} data={dataSource}
+ />
+
+);
+ReactDOM.render(, _mount_);
+```
+
## Props
### Table
@@ -845,6 +904,7 @@ ReactDOM.render(, _mount_);
| render | 生成复杂数据的渲染函数，参数分别为当前行的值，当前值的 `key`，行索引数据，当前行号，当前列号。| `Function(text, key, rowData, rowNumber, columnNumber)` | - |
| align | 设置列的对齐方式 | "left"|"center"|"right" | - |
| className | 列样式类名 | string | - |
+| scroll | 表格是否可滚动，也可以指定滚动区域的宽、高 | { x?: React.CSSProperties['width'], y?: React.CSSProperties['height'] } | - |
### expandable
diff --git a/packages/react-table/src/TableTr.tsx b/packages/react-table/src/TableTr.tsx
index 2b09e74c04..884f3ec0a2 100644
--- a/packages/react-table/src/TableTr.tsx
+++ b/packages/react-table/src/TableTr.tsx
@@ -75,7 +75,7 @@ export default function TableTr(props: TableTr
children: trData[keyName.key!],
};
if (render[keyName.key!]) {
- const child = render[keyName.key!](trData[keyName.key!], keyName.key!, trData, rowNum, colNum);
+ const child = render[keyName.key!](trData[keyName.key!], keyName.key, trData, rowNum, colNum);
if (React.isValidElement(child)) {
objs.children = child;
} else {
@@ -106,7 +106,7 @@ export default function TableTr(props: TableTr
{...objs}
key={colNum}
// style={keyName?.style}
- className={`${objs.className} ${prefixCls}-tr-children-${keyName?.align || 'left'} ${
+ className={`${objs.className || ''} ${prefixCls}-tr-children-${keyName.align || 'left'} ${
keyName.className || ''
}`}
onClick={(evn) => onCell(trData, { rowNum, colNum, keyName: keyName.key! }, evn)}
diff --git a/packages/react-table/src/index.tsx b/packages/react-table/src/index.tsx
index 76854026ab..1beef63205 100644
--- a/packages/react-table/src/index.tsx
+++ b/packages/react-table/src/index.tsx
@@ -66,6 +66,7 @@ export interface TableProps exten
) => void;
expandable?: ExpandableType;
rowKey?: keyof T;
+ scroll?: { x?: React.CSSProperties['width']; y?: React.CSSProperties['height'] };
}
export interface ICellOptions {
@@ -88,6 +89,7 @@ export default function Table(props: TablePro
children,
expandable,
rowKey,
+ scroll,
...other
} = props;
const [expandIndex, setExpandIndex] = useState>([]);
@@ -187,14 +189,31 @@ export default function Table(props: TablePro
selfColumns,
};
}, [columns, expandIndex]);
-
+ const style: { table: React.CSSProperties; div: React.CSSProperties } = useMemo(() => {
+ const style: { table: React.CSSProperties; div: React.CSSProperties } = {
+ table: {},
+ div: {},
+ };
+ if (scroll) {
+ if (scroll.x !== undefined) {
+ style.table.minWidth = '100%';
+ style.table.width = scroll.x;
+ style.div.overflowX = 'auto';
+ style.div.overflowY = 'hidden';
+ }
+ if (scroll.y !== undefined) {
+ style.div.maxHeight = scroll.y;
+ style.div.overflowY = 'scroll';
+ }
+ }
+ return style;
+ }, [scroll]);
const cls = [prefixCls, className, bordered ? `${prefixCls}-bordered` : null].filter(Boolean).join(' ').trim();
const { header, render, ellipsis } = getLevelItems(self.selfColumns);
-
return (
-
-
-
+
+
+
{title && {title}}
{columns && columns.length > 0 && }
{data && data.length > 0 && (
@@ -227,6 +246,6 @@ export default function Table(props: TablePro
{footer}
}
-
+
);
}