169 lines
4.4 KiB
Markdown
169 lines
4.4 KiB
Markdown
# Go Desk 表格高度问题分析
|
||
|
||
## 📐 整体布局结构
|
||
|
||
### 完整布局层级树
|
||
|
||
```
|
||
App.vue (100vh)
|
||
└── a-layout (db-cli-layout, height: 100vh)
|
||
├── a-layout-sider (sidebar, width: 280px, fixed)
|
||
│ └── ConnectionTree
|
||
│
|
||
└── a-layout (main-layout, flex: 1)
|
||
├── a-layout-content (editor-area, 动态高度百分比)
|
||
│ └── SqlEditor
|
||
│
|
||
├── div (editor-result-divider, 4px)
|
||
│
|
||
└── a-layout-content (result-area, flex: 1) ← 关键：应占据剩余空间
|
||
└── ResultPanel (result-panel-wrapper, height: 100%)
|
||
└── a-tabs (result-tabs, height: 100%)
|
||
└── a-tab-pane (result-content, flex: 1, padding: 12px)
|
||
└── result-data-wrapper (flex: 1)
|
||
├── result-stats (固定高度, margin-bottom: 4px)
|
||
└── result-table-container (flex: 1, overflow: hidden)
|
||
├── a-table (scroll.y = tableScrollHeight)
|
||
└── custom-pagination (固定高度)
|
||
```
|
||
|
||
## 🔍 问题诊断
|
||
|
||
### 当前症状
|
||
1. **底部有空白** - 表格下方有大量未使用的空白区域
|
||
2. **表格没有填满可用空间**
|
||
|
||
### 布局断点分析
|
||
|
||
#### 断点1: main-layout
|
||
- ✅ `flex: 1` - 正确，应占据除 sidebar 外的所有空间
|
||
- ✅ `flex-direction: column`
|
||
|
||
#### 断点2: result-area
|
||
- ✅ `flex: 1` - 正确
|
||
- ✅ 应该占据 main-layout 中除 editor-area 外的所有空间
|
||
|
||
#### 断点3: result-content
|
||
- ⚠️ `flex: 1` + `padding: 12px`
|
||
- ✅ padding 会占用空间，但 flex: 1 应该让内容区填满剩余空间
|
||
|
||
#### 断点4: result-data-wrapper
|
||
- ✅ `flex: 1` - 正确
|
||
|
||
#### 断点5: result-table-container (问题所在)
|
||
- ✅ `flex: 1`
|
||
- ❌ 内部使用 `scroll.y` 固定高度，与 flex 冲突
|
||
|
||
### 核心问题
|
||
|
||
**Arco Table 的 `scroll.y` 属性的工作机制**：
|
||
|
||
```javascript
|
||
// 当设置 scroll.y = 400 时
|
||
<a-table :scroll="{ y: 400 }">
|
||
|
||
// Arco Table 内部结构：
|
||
.arco-table {
|
||
height: auto; // 或固定高度
|
||
}
|
||
.arco-table-body {
|
||
max-height: 400px; // 这是滚动高度
|
||
overflow: auto;
|
||
}
|
||
```
|
||
|
||
**问题**：
|
||
- `scroll.y` 设置的是 **tbody 的滚动高度**（不包括表头）
|
||
- 表格总高度 = 表头高度 + scroll.y
|
||
- 当 `scroll.y` 过小时，表格下方会有空白
|
||
- 当 `scroll.y` 过大时，表格会超出容器
|
||
|
||
### 当前计算逻辑
|
||
|
||
```javascript
|
||
// 当前计算公式
|
||
const scrollY = containerHeight - paginationHeight - 12;
|
||
|
||
// 问题：
|
||
// 1. containerHeight = result-table-container 的 offsetHeight
|
||
// 2. 但 result-table-container 是 flex: 1，它的实际高度由父容器决定
|
||
// 3. 如果 scroll.y 小于实际可用空间，就会有空白
|
||
```
|
||
|
||
## 🎯 正确的解决方案
|
||
|
||
### 方案对比
|
||
|
||
#### ❌ 错误方案：直接计算 scroll.y
|
||
```javascript
|
||
// 问题：计算的值可能不准确
|
||
const scrollY = containerHeight - paginationHeight - 12;
|
||
```
|
||
|
||
#### ✅ 正确方案：使用 CSS 让表格自动填充
|
||
**移除 scroll.y，纯 CSS 控制**：
|
||
|
||
```vue
|
||
<a-table
|
||
:columns="tableColumns"
|
||
:data="pagedData"
|
||
:pagination="false"
|
||
class="result-table"
|
||
/>
|
||
```
|
||
|
||
```css
|
||
.result-table-container {
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.result-table-container :deep(.arco-table) {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.result-table-container :deep(.arco-table-body) {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
overflow-x: auto;
|
||
}
|
||
```
|
||
|
||
### Arco Table 的 DOM 结构
|
||
|
||
```
|
||
.arco-table
|
||
├── .arco-table-header (表头，固定高度)
|
||
└── .arco-table-body (表体，flex: 1, overflow: auto)
|
||
```
|
||
|
||
**关键**：
|
||
- 表头自动高度（由内容决定）
|
||
- 表体填充剩余空间
|
||
- overflow 在表体上，不是整个表格
|
||
|
||
## 📋 行动计划
|
||
|
||
### 步骤1: 移除 scroll.y 属性
|
||
### 步骤2: 使用纯 CSS flex 布局
|
||
### <20>骤骤3: 确保每个容器有正确的 flex 设置
|
||
### 步骤4: 测试不同数据量下的表现
|
||
|
||
## 🎨 期望效果
|
||
|
||
- ✅ 表格填满所有可用空间（无底部空白）
|
||
- ✅ 数据少时：表头 + 空行 + 分页控件填满空间
|
||
- ✅ 数据多时：表头 + 可滚动表体 + 分页控件
|
||
- ✅ 窗口调整时自动响应
|
||
|
||
## 🔧 待确认
|
||
|
||
1. 当前浏览器控制台输出的具体数值是多少？
|
||
2. 数据量是多还是少？（行数大概多少）
|
||
3. 空白区域大概有多少像素？
|