1. 项目概述
最近在开发一个后台管理系统时，遇到了一个需要展示层级数据的场景：主表格的每一行都可以展开显示子表格。这种"双层表格"的需求在企业管理系统中非常常见，比如订单与订单明细、部门与员工等关系。Element Plus作为Vue 3的主流UI库，其表格组件本身就支持展开行功能，但实际开发中会遇到不少细节问题。
我在重构公司CRM系统时，就遇到了一个典型场景：需要展示客户列表（主表），点击展开后显示该客户的历史订单（子表）。这个功能看似简单，但在数据加载、样式调整、性能优化等方面都有不少门道。下面就把我在实战中积累的经验分享给大家。
2. 核心需求解析
2.1 双层表格的应用场景
这种结构特别适合展示一对多的数据关系：
- 客户 ↔ 订单
- 部门 ↔ 员工
- 分类 ↔ 商品
- 项目 ↔ 任务
相比分页或弹窗展示子数据，展开表格的用户体验更连贯，尤其适合需要频繁对比查看的场景。
2.2 技术选型考量
Element Plus的el-table组件天然支持这种需求，主要通过以下特性实现：
row-key：必须设置的行唯一标识expand-row-keys：控制当前展开的行type="expand"的列定义@expand-change事件监听
3. 基础实现方案
3.1 数据结构设计
推荐使用嵌套结构，这样父子数据关系清晰：
javascript复制const tableData = [
{
id: 1,
name: '客户A',
orders: [
{ orderId: 'A001', amount: 100 },
{ orderId: 'A002', amount: 200 }
]
},
// ...
]
3.2 模板代码示例
html复制<el-table
:data="tableData"
row-key="id"
@expand-change="handleExpand"
>
<el-table-column type="expand">
<template #default="{row}">
<el-table :data="row.orders">
<el-table-column prop="orderId" label="订单号" />
<el-table-column prop="amount" label="金额" />
</el-table>
</template>
</el-table-column>
<el-table-column prop="name" label="客户名" />
<!-- 其他主表列 -->
</el-table>
4. 高级功能实现
4.1 动态加载子表数据
对于大数据量场景，建议使用懒加载：
javascript复制async function handleExpand(row, expandedRows) {
if (expandedRows.includes(row) && !row.orders) {
const res = await api.getOrders(row.id)
row.orders = res.data
}
}
4.2 样式优化技巧
子表格缩进问题解决方案：
css复制/* 调整子表格缩进 */
.el-table__expanded-cell {
padding: 0 !important;
}
/* 子表格添加左边距 */
.child-table {
margin-left: 40px;
}
5. 性能优化方案
5.1 虚拟滚动支持
大数据量时启用虚拟滚动：
html复制<el-table
v-loading="loading"
:data="tableData"
row-key="id"
height="600"
@expand-change="handleExpand"
>
<!-- 表格列定义 -->
</el-table>
5.2 分页加载策略
主表分页 + 子表懒加载的组合方案：
javascript复制const pagination = reactive({
page: 1,
size: 10,
total: 0
})
async function fetchData() {
const res = await api.getCustomers({
page: pagination.page,
size: pagination.size
})
tableData = res.data
pagination.total = res.total
}
6. 常见问题排查
6.1 展开行状态丢失
问题现象：分页/排序后展开状态重置
解决方案：
javascript复制const expandedRows = ref([])
function handleExpand(row, expandedRows) {
this.expandedRows = expandedRows
}
// 在分页/排序方法中保持展开状态
async function handlePageChange() {
await fetchData()
expandedRows.value.forEach(row => {
const found = tableData.find(item => item.id === row.id)
if (found) this.$refs.table.toggleRowExpansion(found, true)
})
}
6.2 子表格样式错乱
典型问题：
- 表头不对齐
- 边框样式不一致
解决方案：
css复制/* 统一子表格样式 */
.child-table .el-table__header-wrapper {
display: none;
}
.child-table .el-table__row:last-child td {
border-bottom: none;
}
7. 扩展功能实现
7.1 多级展开（三层表格）
在子表格中再嵌套展开列：
html复制<el-table :data="row.orders" row-key="orderId">
<el-table-column type="expand">
<template #default="{row:order}">
<el-table :data="order.items">
<!-- 商品明细列 -->
</el-table>
</template>
</el-table-column>
<!-- 订单列 -->
</el-table>
7.2 展开行自定义内容
不只是表格，可以放任意内容：
html复制<el-table-column type="expand">
<template #default="{row}">
<el-tabs>
<el-tab-pane label="订单" :key="1">
<el-table :data="row.orders" />
</el-tab-pane>
<el-tab-pane label="备注" :key="2">
{{ row.notes }}
</el-tab-pane>
</el-tabs>
</template>
</el-table-column>
8. 最佳实践建议
-
数据量控制：
- 主表建议不超过1000行
- 单个子表不超过50行
- 超过时考虑分页或懒加载
-
性能监测：
javascript复制console.time('tableRender') nextTick(() => { console.timeEnd('tableRender') }) -
键盘可访问性：
html复制<el-table :row-key="row => row.id" @row-keydown="handleKeydown" > -
移动端适配：
css复制@media (max-width: 768px) { .el-table__expanded-cell { overflow-x: auto; } }
在实际项目中，双层表格的交互细节往往比想象中复杂。比如我们遇到过一个案例：当主表有固定列时，子表格的横向滚动会与主表不同步。解决方案是通过监听滚动事件同步两者的scrollLeft值：
javascript复制const syncScroll = (mainTable, childTable) => {
const mainHeader = mainTable.querySelector('.el-table__header-wrapper')
const childBody = childTable.querySelector('.el-table__body-wrapper')
mainHeader.addEventListener('scroll', () => {
childBody.scrollLeft = mainHeader.scrollLeft
})
}
这个功能看似简单，但要做好用户体验，需要在前端细节上下不少功夫。建议开发时多从用户角度出发，考虑各种边界情况。