Element Plus实现表格单元格内嵌套表格的方法

Element Plus 的 el-table 本身支持展开行、树形数据以及自定义单元格内容，因此当业务数据存在“主表 + 明细表”这样的层级关系时，可以直接在单元格中再次嵌套一个 el-table，实现更加直观的数据展示效果。

常见场景包括订单与商品明细、项目与任务列表、用户与操作记录、商品与 SKU 信息等。核心思路是利用 el-table-column 的插槽，在父表格单元格内部放置一个子表格。

一、基本实现思路

假设页面需要展示订单列表，每一行是一个订单，而订单中的商品需要以表格形式展示：

订单编号    用户       商品明细
------------------------------------------------
10001      张三       商品A  2件  100元
                         商品B  1件   50元
------------------------------------------------
10002      李四       商品C  3件  240元
                         商品D  2件  160元

如果直接把商品明细拼接成字符串，数据较多时可读性较差。更合适的方式是在“商品明细”这一列中嵌套一个新的 el-table。

数据结构可以设计成：

JavaScript
const tableData = [
  {
    orderNo: '10001',
    userName: '张三',
    amount: 150,
    products: [
      {
        name: '商品A',
        quantity: 2,
        price: 50
      },
      {
        name: '商品B',
        quantity: 1,
        price: 50
      }
    ]
  },
  {
    orderNo: '10002',
    userName: '李四',
    amount: 400,
    products: [
      {
        name: '商品C',
        quantity: 3,
        price: 80
      },
      {
        name: '商品D',
        quantity: 2,
        price: 80
      }
    ]
  }
]

每一条主表数据中的 products 就对应当前订单的子表格数据。

二、使用插槽嵌套 el-table

Vue 3 + Element Plus 中，可以通过 el-table-column 的默认插槽获取当前行数据。

完整示例：

vue

   :data="tableData" border>
    
      prop="orderNo"
      label="订单编号"
      width="150"
    />

    
      prop="userName"
      label="用户"
      width="120"
    />

     label="商品明细">
       #default="scope">
        
          :data="scope.row.products"
          border
          size="small"
          style="width: 100%"
        >
          
            prop="name"
            label="商品名称"
          />

          
            prop="quantity"
            label="数量"
            width="100"
          />

          
            prop="price"
            label="单价"
            width="120"
          />
        
      
    

    
      prop="amount"
      label="订单金额"
      width="120"
    />
  


 setup>
import { ref } from 'vue'

const tableData = ref([
  {
    orderNo: '10001',
    userName: '张三',
    amount: 150,
    products: [
      {
        name: '商品A',
        quantity: 2,
        price: 50
      },
      {
        name: '商品B',
        quantity: 1,
        price: 50
      }
    ]
  },
  {
    orderNo: '10002',
    userName: '李四',
    amount: 400,
    products: [
      {
        name: '商品C',
        quantity: 3,
        price: 80
      },
      {
        name: '商品D',
        quantity: 2,
        price: 80
      }
    ]
  }
])

其中最关键的代码是：

vue
 #default="scope">
   :data="scope.row.products">
    ...
  

scope.row 表示当前父表格行的数据，而 scope.row.products 就是该行对应的子表格数据。

三、给嵌套表格增加展开效果

如果每一行的子数据比较多，直接把完整的子表格显示出来会导致主表高度迅速增加。这种情况下，更推荐使用 Element Plus 的展开行功能。

父表格增加一个展开列：

vue
 :data="tableData" border>
   type="expand">
     #default="scope">
      
        :data="scope.row.products"
        border
        size="small"
      >
        
          prop="name"
          label="商品名称"
        />

        
          prop="quantity"
          label="数量"
          width="100"
        />

        
          prop="price"
          label="单价"
          width="120"
        />
      
    
  

  
    prop="orderNo"
    label="订单编号"
  />

  
    prop="userName"
    label="用户"
  />

  
    prop="amount"
    label="订单金额"
  />

这样默认只显示订单信息，点击左侧展开按钮后才显示对应的商品明细。

这种方案通常比“所有单元格直接嵌套表格”更加适合后台管理系统。

四、在单元格中根据条件显示子表格

实际项目中，并不是每一行都有明细数据。有些数据可能需要显示普通文本，有些数据则需要显示子表格。

可以配合 v-if：

vue
 label="详细信息">
   #default="scope">
    
      v-if="scope.row.children?.length"
      :data="scope.row.children"
      border
      size="small"
    >
      
        prop="name"
        label="名称"
      />

      
        prop="status"
        label="状态"
      />
    

     v-else class="empty-text">
      暂无明细
    
  

这样可以避免子数据为空时仍然渲染一个空表格。

五、控制嵌套表格的高度

嵌套表格最大的一个问题是高度。

例如某个订单包含几十条商品记录，如果全部展开，页面会变得非常长。可以给子表格设置最大高度：

vue

  :data="scope.row.products"
  border
  size="small"
  max-height="300"
>

当子表格超过 300px 后，内部会出现滚动区域，而不会无限撑高父表格。

也可以根据数据量动态设置：

vue

  :data="scope.row.products"
  border
  size="small"
  :max-height="scope.row.products.length > 5 ? 300 : undefined"
>

对于数据量较大的后台页面，这种处理能够明显改善页面布局。

六、调整嵌套表格样式

默认情况下，父表格和子表格使用相同的表格样式，视觉层级可能不够明显。

可以为子表格添加自定义 class：

vue

  :data="scope.row.products"
  class="child-table"
  border
  size="small"
>

然后在样式中调整：

CSS
.child-table {
  margin: 8px 0;
}

.child-table :deep(.el-table__header th) {
  background: #f7f7f7;
}

.child-table :deep(.el-table__cell) {
  padding: 6px 0;
}

如果使用