From a09205214e5cb6803563cb06c6d9f58d68916b73 Mon Sep 17 00:00:00 2001
From: xusd <hugeinfo123>
Date: Mon, 16 Sep 2024 22:11:21 +0800
Subject: [PATCH] 调整网格调整，修正头部head数据传输逻辑
---
gz-customerSystem/src/components/TableView/index.jsx | 84 +++++++++++++++++++++++++++++------------
1 files changed, 59 insertions(+), 25 deletions(-)
diff --git a/gz-customerSystem/src/components/TableView/index.jsx b/gz-customerSystem/src/components/TableView/index.jsx
index 6ef01a6..b2cffcb 100644
--- a/gz-customerSystem/src/components/TableView/index.jsx
+++ b/gz-customerSystem/src/components/TableView/index.jsx
@@ -7,12 +7,13 @@
* @Version: 1.0.0
* @Description: 公共Table封装组件
*/
-import React from 'react';
+import React, { useRef, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Space, Tooltip, Table } from 'antd';
import { ReloadOutlined, FolderFilled } from '@ant-design/icons';
import * as $$ from '../../utils/utility';
import './index.less';
+import { getOffset, getSize } from '@/utils/utility';
const TableView = ({
showHeader,
@@ -30,6 +31,9 @@
scroll = null,
expandable = null,
rowClassName,
+ offsetHeight = 0,//高度偏移量
+ tableHeight,//自定义表格高度
+ isScroll = false,//表格是否竖向滚动，兼容以前的，当需要表格竖向滚动，请设置这个
...other
}) => {
// 80 ['类型','登记人','调解员','承办法官','调解员','签收人','退回人','处理时限','调解进度/司法确认进度','其他调解员','申请渠道','司法确认结果','助理/书记员','调解类型']
@@ -143,6 +147,31 @@
myColumns.push(x);
});
+ const scrollRef = useRef(null)
+ const [height, setHeight] = useState();//表格高度
+
+ useEffect(() => {
+ onWindowResize()
+ window.addEventListener("resize", onWindowResize);
+ // 返回一个函数，该函数会在组件卸载前执行
+ return () => {
+ // 组件销毁时执行
+ window.removeEventListener("resize", onWindowResize);
+ };
+ }, [])
+
+ const onWindowResize = () => {
+ if (tableHeight) {
+ setHeight(tableHeight)
+ } else {
+ let offsetTop = 0;
+ if (scrollRef && scrollRef.current) {
+ offsetTop = getOffset(scrollRef.current).top;
+ }
+ setHeight(getSize().windowH - offsetTop - 46 - offsetHeight)
+ }
+ };
+
return (
<>
{showHeader && (
@@ -171,30 +200,35 @@
</div>
</div>
)}
- <Table
- columns={myColumns}
- dataSource={dataSource}
- rowClassName={(record, index) => {
- return `${rowClassName && rowClassName(record, index)}`;
- }}
- size={size}
- rowKey={rowKey}
- bordered={bordered}
- rowSelection={rowSelection}
- scroll={scroll}
- expandable={expandable}
- pagination={
- !pagination
- ? false
- : {
- showSizeChanger: true,
- showTotal: (total) => `共${total}条`,
- pageSizeOptions: [10, 20, 30],
- ...pagination,
- }
- }
- {...other}
- />
+ <div style={{ height: height + 'px' }} id="table" ref={scrollRef}>
+ <Table
+ columns={myColumns}
+ dataSource={dataSource}
+ rowClassName={(record, index) => {
+ return `${rowClassName && rowClassName(record, index)}`;
+ }}
+ size={size}
+ rowKey={rowKey}
+ bordered={bordered}
+ rowSelection={rowSelection}
+ scroll={{
+ y: isScroll ? height - 80 : null,
+ ...scroll
+ }}
+ expandable={expandable}
+ pagination={
+ !pagination
+ ? false
+ : {
+ showSizeChanger: true,
+ showTotal: (total) => `共${total}条`,
+ pageSizeOptions: [10, 20, 30],
+ ...pagination,
+ }
+ }
+ {...other}
+ />
+ </div>
</>
);
};
--
Gitblit v1.8.0