基于react + antd 项目框架开发的管理端列表页,通常需要根据浏览器窗口动态设置表格列表出现滚动条的最大高度scroll.y属性进行浏览器适配。
通用方法:
/**
* 获取第一个表格的可视化高度
* @param {*} extraHeight 额外的高度(表格底部的内容高度 Number类型,默认为74)
* @param {*} id 当前页面中有多个table时需要制定table的id
*/
export const getTableScroll = (params: { extraHeight?: number, id?: string }) => {
let extraHeight = params?.extraHeight;
if (typeof extraHeight == "undefined") {
// 默认底部边距20
extraHeight = 0;
}
let tHeader = null
if (params?.id) {
const { id } = params;
tHeader = document.getElementById(id) ? document.getElementById(id).getElementsByClassName("ant-table-thead")[0] : null
} else {
tHeader = document.getElementsByClassName("ant-table-thead")[0];
}
//表格内容距离顶部的距离
let tHeaderBottom = 0;
if (tHeader) {
tHeaderBottom = tHeader.getBoundingClientRect().bottom;
}
//窗体高度-表格内容顶部的高度-表格内容底部的高度
let height = `calc(100vh - ${tHeaderBottom + extraHeight}px)`;
return height;
}
table 组件:
const TableCom: React.FC<TableProps> = (props) => {
const { dataSource, columns, loading, extraHeight, ...otherprops } = props;
// 表格滚动高度
const [scrollY, setScrollY] = useState<any>();
useEffect(() => {
const calcScrollY = getTableScroll({ extraHeight: extraHeight || 20 });
setScrollY(calcScrollY);
}, []);
return (
<div className={styles.table}>
<Table
className={styles.tableClass}
dataSource={dataSource}
columns={columns}
scroll={{ y: scrollY }}
loading={loading}
{...otherprops}
/>
</div>
)
}
export default TableCom;
需要注意:
1.需要固定表格父容器的总高度
.table {
width: 100%;
height: 100%;
position: relative;
.tableClass {
height: 100%;
}
}