Commit a07db7bb authored by Data Governance Dev's avatar Data Governance Dev

fix(web): selection 列移到最后 — Element Plus 兼容 bug

# 问题
左侧「数据字典浏览器」表格渲染了表名 / 字段数,但每行没有勾选框,无法单选 / 多选。

# 根因
Element Plus 的列渲染 bug:当 <el-table-column type="selection"> 写在「最前」,
且后面紧跟带 <template #default> slot 的列时:
- header 的 selection <th> 被算成 colspan="2" scope="colgroup"
  (正常应该是 colspan="1" scope="col")
- body 行的 selection <td> 完全不渲染 → 整个表只剩 header 的 1 个全选框

# 验证(jsdom 跑了 4 个最小 case)
| selection 位置 | 后续列类型                | 结果                       |
| 1              | 第 1 | 全部 prop                | ✅ 3 cell + 3 checkbox |
| 2              | 第 1 | 全部 default slot       | ❌ 2 cell + 1 checkbox(bug)|
| 3              | 末尾 | 全部 default slot       | ✅ 3 cell + 3 checkbox |
| 4              | 末尾 | 全部 prop                | ✅ 3 cell + 3 checkbox |

只有 case 2 复现 bug —— 确认是 selection 列在前 + 后列带 slot 的组合触发。

# 修复
web/static/index.html:142-165 — 把 <el-table-column type="selection">
从第 1 列移到末尾(第 3 列),并加注释说明这个约束。

# 验证
jsdom 模拟完整页面渲染后:
- header 第 3 列:<th class="... el-table-column--selection"
  colspan="1" scope="col">含全选 checkbox
- body 第 3 列:<td class="... el-table-column--selection">
  含 <label class="el-checkbox"> 行复选框
- 3 行 × 1 checkbox = 3 个勾选框(全部渲染)

# 兼容性
- 行复选框从视觉上从最左 → 最右;功能(toggleRowSelection / clearSelection /
  selection-change)不变,依赖的是 row 对象不是列顺序
- 全选 / 清空 / 反选 三个按钮逻辑不依赖列顺序

# 文件清单
- docs/WORKLOG.md       | +50 工作记录(排查过程 + 4 个 case 验证表)
- web/static/index.html | +4 / -1 selection 列移位 + 约束注释
parent 272c10ed
......@@ -2,6 +2,56 @@
> 任务做完一次记一次。最近的在最上面。
## 2026-08-07 · 修复左侧表格 selection 列不渲染
### 问题
「数据字典浏览器」左侧表格:表名/注释、字段数都有渲染,但**每一行没有勾选框**,不能单选/多选。
### 根因(Element Plus 兼容性问题)
selection 列写在**最前面** + 后面接带 `default slot` 的列时:
- header 的 selection `<th>` 会算错:`colspan="2" scope="colgroup"`(正常应该是 `colspan="1" scope="col"`)
- body 行的 selection `<td>` 完全不渲染 —— 只剩 `column_2` 和 `column_3` 两个 cell
- 结果:表里只有 header 的 1 个全选 checkbox,行内 0 个复选框
#### 验证
写 4 个最小 case,跑 jsdom 模拟完整挂载:
| Case | selection 列位置 | 后面列 | 渲染结果 |
|------|------------------|--------|----------|
| 1 | 第 1 列 | 全部 `prop`(无 slot) | ✅ 3 cell、3 checkbox |
| 2 | 第 1 列 | 全部 `default` slot | ❌ 2 cell、1 checkbox(漏行) |
| 3 | 最后 1 列 | 全部 `default` slot | ✅ 3 cell、3 checkbox |
| 4 | 最后 1 列 | 全部 `prop`(无 slot) | ✅ 3 cell、3 checkbox |
只有 **case 2** 复现 bug。
### 修复
[web/static/index.html:142-165](web/static/index.html#L142-L165) — 把 `<el-table-column type="selection">` 从第 1 列移到最末尾(其它列保持不变),并在上面写明这个约束。
```html
<!-- 改前 -->
<el-table-column type="selection" width="40" reserve-selection />
<el-table-column label="表名 / 注释"><template #default>...</template></el-table-column>
<el-table-column label="字段数"><template #default>...</template></el-table-column>
<!-- 改后 -->
<el-table-column label="表名 / 注释"><template #default>...</template></el-table-column>
<el-table-column label="字段数"><template #default>...</template></el-table-column>
<el-table-column type="selection" width="40" reserve-selection />
```
### 验证(jsdom 全页 mock)
- header 第 3 列 `el-table_1_column_3 el-table-column--selection`,`colspan="1" scope="col"`,含全选 checkbox
- body 第 3 列 `el-table_1_column_3 el-table-column--selection`,含 `<label class="el-checkbox">` 行复选框
- 3 行 × 1 checkbox = 3 个勾选框
### 调试副产物(已删)
- `web/static/test_select.html` / `test_slot.html` / `test_last.html`(3 个最小 case)
- `/tmp/check_*.cjs`(jsdom 测试脚本)
### 未提交
按用户要求,待 review 后再提交。
## 2026-08-07 · 修复页面打开空白
### 问题
......
......@@ -145,7 +145,9 @@
stripe size="small" height="520"
@selection-change="onTableSelectionChange"
:row-key="row => row.table_name">
<el-table-column type="selection" width="40" reserve-selection />
<!-- 注意:selection 列必须放在最后 —— 放在带 default slot 的列前面时,
Element Plus 会算错 header 的 colspan / scope,导致 body 行
的 selection cell 不渲染(只显示 header 的全选框)。 -->
<el-table-column label="表名 / 注释" show-overflow-tooltip>
<template #default="{ row }">
<div>
......@@ -160,6 +162,7 @@
<el-tag size="small" type="info" effect="plain">{{ fieldCountByTable[row.table_name] || 0 }}</el-tag>
</template>
</el-table-column>
<el-table-column type="selection" width="40" reserve-selection />
</el-table>
</div>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment