Element-ui的table表头的合并(行和列的合并)

最新推荐文章于 2025-06-22 19:56:09 发布

allakk

最新推荐文章于 2025-06-22 19:56:09 发布

阅读量2.6w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： element学习记录

本文链接：https://blog.youkuaiyun.com/allakk/article/details/89390019

element学习记录专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何在Element UI的表格组件中实现列的合并，通过示例代码展示具体操作方法，帮助开发者掌握表格布局的定制技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

列的合并`

<el-table>
  <el-table-column label="总行" header-align="center" align="center">
  </el-table-column>

  <el-table-column label="第一行1" header-align="center" align="center">
    <el-table-column label="第二行1" header-align="center" align="center">
  </el-table-column>
  </el-table-column>

  <el-table-column label="第一行2" header-align="center" align="center">
    <el-table-column label="第二行2" header-align="center" align="center">
  </el-table-column>
  </el-table-column>

  <el-table-column label="第一行3" header-align="center" align="center">
    <el-table-column label="第二行3" header-align="center" align="center">
  </el-table-column>
  </el-table-column>

  <el-table-column label="第一行4" header-align="center" align="center">
    <el-table-column label="第二行4" header-align="center" align="center">
  </el-table-column>
  </el-table-column>
</el-table>

效果：
在这里插入图片描述

行的合并

<el-table>
  <el-table-column label="总行" header-align="center" align="center">
  <el-table-column label="第一行1" header-align="center" align="center">
  </el-table-column>

  <el-table-column label="第一行2" header-align="center" align="center">
  </el-table-column>
  </el-table-column>
</el-table>

效果：
在这里插入图片描述