你提到 **“多级表头是横的”**，这说明你想要的是：**横向的多级表头（即列合并）**，而不是前面我们实现的纵向合并（行合并）。这是一个非常关键的区别！
---
### ✅ 问题澄清：
你现在的数据结构如下：
```js
const rawData = [
{ ID:
1, UPPER_CLASS: 'A', SMALL_MATERIALS: 'A
1', GOODS_CLASS: 'A
1-1' },
{ ID:
2, UPPER_CLASS: 'A', SMALL_MATERIALS: 'A
1', GOODS_CLASS: 'A
1-2' },
...
]
```
但你现在希望构建一个 **横向的多级表头表格**，例如：
```
| | A | B |
| | A
1 | A
2 | B
1 | B
2 |
|
-------|
--------------|
--------------|
--------------|
--------------|
| | A
1-1 | A
1-2| A
2-1 | B
1-1 | B
1-2| B
2-1 |
```
也就是：
- 第一行：`UPPER_CLASS` 横向分组（A、B）
- 第二行：`SMALL_MATERIALS` 在对应一级下再分组（A
1、A
2 属于 A；B
1、B
2 属于 B）
- 第三行：`GOODS_CLASS` 是最细粒度的叶子列，每个占一列
- 数据行是这些 `GOODS_CLASS` 对应的具体值（比如库存、价格等）
> ❗注意：原始 `rawData` 只提供了分类信息，并没有提供每类对应的“具体数值”（如数量、金额），所以我们需要假设每一行代表某个指标值，或者你需要将数据转为宽表格式。
---
### ✅ 正确方案：在 Vue 中使用 `<el
-table>` 的 `header
-cell
-class
-name` 和 `Scoped Slot` 实现 **横向多级表头**
但由于 Element Plus 的 `<el
-table>` 不支持动态渲染复杂表头，我们需要使用 **纯
HTML 表格 + v
-for 嵌套渲染** 来完全控制表头结构。
---
### ✅ 完整 Vue 代码（
HTML Table 实现横向多级表头）
```vue
<template>
<table border="
1" cellspacing="0" cellpadding="8" style="border
-collapse: collapse; width:
100%">
<!
-- 第一级表头：UPPER_CLASS
-->
<thead>
<tr>
<th rowspan="3" style="width:
120px">类别</th>
<template v
-for="col in headerConfig" :key="col
.upper">
<th
:colspan="col
.colSpan"
:style="{ backgroundColor: '#ecf5ff', textAlign: 'center' }"
>
{{ col
.upper }}
</th>
</template>
</tr>
<!
-- 第二级表头：SMALL_MATERIALS
-->
<tr>
<template v
-for="col in headerConfig" :key="col
.upper">
<template v
-for="small in col
.children" :key="small
.label">
<th
:colspan="small
.colSpan"
:style="{ backgroundColor: '#f0f9eb', textAlign: 'center' }"
>
{{ small
.label }}
</th>
</template>
</template>
</tr>
<!
-- 第三级表头：GOODS_CLASS
-->
<tr>
<template v
-for="col in headerConfig" :key="col
.upper">
<template v
-for="small in col
.children" :key="small
.label">
<template v
-for="leaf in small
.items" :key="leaf
.GOODS_CLASS">
<th>{{ leaf
.GOODS_CLASS }}</th>
</template>
</template>
</template>
</tr>
</thead>
<!
-- 数据行
-->
<tbody>
<tr>
<td>数量</td>
<template v
-for="col in headerConfig" :key="col
.upper">
<template v
-for="small in col
.children" :key="small
.label">
<template v
-for="leaf in small
.items" :key="leaf
.GOODS_CLASS">
<td>{{ getValue(leaf
.ID) }}</td>
</template>
</template>
</template>
</tr>
</tbody>
</table>
</template>
<script setup>
import { ref, computed } from 'vue'
// 原始数据（模拟 SQL 查询结果）
const rawData = [
{ ID:
1, UPPER_CLASS: 'A', SMALL_MATERIALS: 'A
1', GOODS_CLASS: 'A
1-1' },
{ ID:
2, UPPER_CLASS: 'A', SMALL_MATERIALS: 'A
1', GOODS_CLASS: 'A
1-2' },
{ ID: 3, UPPER_CLASS: 'A', SMALL_MATERIALS: 'A
2', GOODS_CLASS: 'A
2-1' },
{ ID: 4, UPPER_CLASS: 'B', SMALL_MATERIALS: 'B
1', GOODS_CLASS: 'B
1-1' },
{ ID: 5, UPPER_CLASS: 'B', SMALL_MATERIALS: 'B
1', GOODS_CLASS: 'B
1-2' },
{ ID: 6, UPPER_CLASS: 'B', SMALL_MATERIALS: 'B
2', GOODS_CLASS: 'B
2-1' },
]
// 模拟每个商品的数据（比如数量）
const valuesMap = {
1:
100,
2:
150,
3: 80,
4:
200,
5:
170,
6: 90,
}
const getValue = (id) => valuesMap[id] || '
-'
// 构建多级表头配置
const headerConfig = computed(() => {
const result = []
// 按 UPPER_CLASS 分组
const upperGroups = {}
rawData
.forEach(item => {
const { UPPER_CLASS: uc, SMALL_MATERIALS: sm } = item
if (!upperGroups[uc]) upperGroups[uc] = {}
if (!upperGroups[uc][sm]) upperGroups[uc][sm] = []
upperGroups[uc][sm]
.push(item)
})
for (const uc in upperGroups) {
const ucGroup = upperGroups[uc]
let totalColSpan = 0
const children = []
for (const sm in ucGroup) {
const items = ucGroup[sm]
children
.push({
label: sm,
colSpan: items
.length,
items, // 叶子节点数据
})
totalColSpan += items
.length
}
result
.push({
upper: uc,
colSpan: totalColSpan,
children,
})
}
return result
})
</script>
<style scoped>
th,
td {
text
-align: center;
padding: 8px;
}
</style>
```
---
### 🔍 解释说明：
| 层级 | 内容 | 实现方式 |
|
------|
------|
----------|
| 第
1行（一级） | `UPPER_CLASS`（A、B） | 使用 `:colspan="总列数"` 合并 |
| 第
2行（二级） | `SMALL_MATERIALS`（A
1、A
2） | 在每个一级下计算其子项数量作为 `colspan` |
| 第3行（三级） | `GOODS_CLASS`（A
1-1, A
1-2...） | 每个商品单独一列 |
| 数据行 | 数量或其他指标 | 按照最终列顺序填入对应值 |
---
### ✅ 输出效果示意：
| 类别 | A | | B | |
|
------|
-------------------|
---------|
-------------------|
---------|
| | A
1 | A
2 | B
1 | B
2 |
| | A
1-1 | A
1-2 | A
2-1 | B
1-1 | B
1-2 | B
2-1 |
| 数量 |
100 |
150 | 80 |
200 |
170 | 90 |
> 所有表头都横向合并，结构清晰。
---
### ❗注意事项：
- 如果后续需要支持排序、筛选、导出 Excel，请考虑使用 [Ant Design Vue](https://www
.antdv
.com/) 或 [Handsontable](https://handsontable
.com/) 等更强大的表格库。
- 当前方案适合静态展示。若需交互性，可封装成组件并添加事件监听。
- 数据必须按 `ORDER BY UPPER_CLASS, SMALL_MATERIALS, GOODS_CLASS` 排序以保证正确分组。
---
###
本文详细介绍了不同难度级别的HTML注入攻击案例，包括GET和POST请求方式下的低、中、高级别攻击，并提供了具体的绕过防御措施的方法。
扫一扫
29万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
