地籍信息不能直接用<table>嵌套实现多级展开，因为浏览器原生<table>不支持行内折叠、列对齐强制严格、跨级展示会破坏语义与无障碍访问，且导出Excel易错位；应改用语义化列表嵌套<details>+CSS模拟表格，并扁平化数据导出。
地籍信息为什么不能直接用 <table> 嵌套实现多级展开
因为浏览器原生 <table> 不支持行内折叠/动态展开，<tr> 必须严格对齐列数，一旦某行跨多级（比如宗地→地块→界址点），强行用 <colspan> 或隐藏行会破坏语义、干扰屏幕阅读器，且排序、筛选、导出 Excel 时极易错位。
真实业务中常见“宗地-子宗地-图斑-界址点”四级结构，每级有不同字段（如宗地含权利人，界址点含坐标），硬套表格会导致 DOM 层级混乱、JS 控制成本陡增。
- 用
<table>做多级缩进，需手动计算<td colspan>和空单元格，后续增删级数就得重写全部 HTML - 导出为 Excel 时，合并单元格会被 Office 解析为单格，界址点坐标可能被吞掉
- 无障碍访问（如读屏软件）无法识别“这是第几级”，
aria-level在<tr>上无效
用 <details><summary> 模拟可折叠层级，但要注意 DOM 结构约束
<details> 是语义化折叠容器，天然支持键盘操作（Space/Enter 展开），比 JS 手动 toggle 更可靠。但它不能直接塞进 <table>——HTML 规范禁止 <details> 作为 <tr> 的子元素。
正确做法是放弃纯表格布局，改用语义化列表嵌套，再用 CSS 模拟表格对齐：
立即学习“前端免费学习笔记（深入）”；
<ul class="cadastral-tree">
<li>
<details>
<summary>宗地编号：GD2023001</summary>
<ul>
<li>权利人：张三</li>
<li>面积：125.6㎡</li>
<li>
<details>
<summary>子宗地：GD2023001-01</summary>
<ul>
<li>用途：住宅</li>
<li>
<details>
<summary>界址点（3个）</summary>
<table><tr><th>序号</th><th>X</th><th>Y</th></tr>
<tr><td>1</td><td>123.45</td><td>678.90</td></tr>
</table>
</details>
</li>
</ul>
</details>
</li>
</ul>
</details>
</li>
</ul>
- 最外层用
<ul>而非<table>，保证<details>合法嵌套 - 仅在最末级（如界址点坐标表）才用
<table>，此时无折叠需求，纯数据展示 - 用 CSS 的
display: grid或display: table-cell模拟列对齐，避免<table>的语义污染
导出 Excel 时如何保持多级结构不塌陷
用户点击“导出”后，Excel 里必须能看清层级关系（比如宗地行前有 2 个空格，子宗地前有 4 个空格），而不是所有数据挤成一列。
关键不是生成 HTML 表格，而是构造带缩进的二维数组，再交给 SheetJS（xlsx）写入：
const data = [ ["", "宗地编号", "GD2023001"], ["", "权利人", "张三"], [" ", "子宗地", "GD2023001-01"], [" ", "用途", "住宅"], [" ", "界址点1", "X=123.45, Y=678.90"], ];
- 用字符串空格控制 Excel 中的缩进，
SheetJS会原样保留 - 避免用
colspan或合并单元格，Excel 合并后无法排序、筛选 - 如果必须用真实表格导出，先用 JS 把嵌套结构扁平化为带
level字段的数组，再按 level 插入空格
IE11 兼容方案：不用 <details> 时怎么降级
不动产系统常需支持 IE11，而 <details> 在 IE 中完全无效。此时必须用 JS 控制显隐，并确保键盘导航仍可用。
核心是用 aria-expanded 和 tabindex 模拟原生行为：
<button aria-expanded="false" tabindex="0">宗地编号：GD2023001</button> <div class="collapsible-content" aria-hidden="true">...</div>
- 点击按钮时切换
aria-expanded和aria-hidden，同时用focus()确保键盘用户能进入内容区 - 按 Enter/Space 键触发展开，不要只监听 click
- CSS 用
max-height+overflow: hidden实现动画，避免display: none导致屏幕阅读器跳过
多级嵌套的复杂度集中在数据建模——把地籍实体抽象为树形结构（parent_id、level、is_leaf），渲染和导出逻辑才能解耦。实际落地时，最易被忽略的是界址点坐标的精度保留（必须用字符串存储，避免 JS 浮点数截断），以及导出后 Excel 单元格格式是否设为“文本”而非“常规”。
