ant-design / ant-design/pro-components

👑 [需求] 实现内容区可用高度获取api,以便于表格等能利用内容区固定高度

Open
#8,971 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

### 🔩 所属模块或组件
`ProLayout - 高级布局`
`PageContainer - 页容器`
`ProTable - 高级表格`

### 🥰 需求描述
实现内容区可用高度获取api,以便于表格等能利用内容区固定高度,目前没有找到方法能获取内容区的可用高度,我想实现内容区固定高度,比如Table表格能固定高度,页面滚动不影响翻页、筛选框等,滚动时就只是滚动Table里的数据内容,而不是整页内容区滚动,这样的在浏览数据时可以方便切换页面和筛选条件数据,不然还得滚动页面到翻页区才能切换翻页,体验不好。

我看了Vue的组件模板 Naive Admin有固定高度的表格,但是在React开发的Ant Design Pro里实现起来麻烦。
参考链接:[https://plus-antd.naiveadmin.com/list/basic-list](https://plus-antd.naiveadmin.com/list/basic-list)

### ⛰ 功能需求适用场景
Table表格浏览数据

### 🧐 解决方案
`ProLayout - 高级布局`
`PageContainer - 页容器`
`ProTable - 高级表格`
这几个组件添加一些ref获取渲染高度,表格能实现高度填充,比如 PageContainer 组件计算出可用内容区高度,ProTable自动占满整个可用区高度,同时在表格筛选条件展开或折叠时重新计算高度并进行调整。

### 🚑 其他信息
参考效果:
![https://assets.naiveadmin.com/pro/10.png](https://assets.naiveadmin.com/pro/10.png)

Contributor guide

Open the contributing guide

Research direction

Read the ProLayout, PageContainer, and ProTable component implementations to understand how content height and scrolling are currently handled. Compare the requested fixed-height table behavior with the linked Naive Admin example, then define the height API and recalculation behavior for expanded or collapsed search filters. Done means the content height can be obtained and ProTable can use it without making the whole page scroll.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.