element-ui table行合并--支持多个行开箱即用

最新推荐文章于 2025-06-28 09:29:44 发布

原创

最新推荐文章于 2025-06-28 09:29:44 发布 · 7.5k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#element-ui table #table合并 #合并列 #开箱即用

本文介绍了在项目中使用Element-UI的Table组件时，如何实现动态行合并。针对数据动态获取带来的合并不便问题，提供了一种创新的解决思路和具体的实现代码，展示了一个支持多个行合并的效果。

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

项目中使用table组件的时候，存在合并列或者合并行看element-ui table组件的文档
由于数据是动态获取，所以存在合并不方便的场景
所以换个思路来实现合并
具体代码：

      <el-table
        :data="tableData"
        :span-method="arraySpanMethod"
        border
        style="width: 100%; margin-top: 20px">
        <el-table-column
          prop="id"
          label="ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名">
        </el-table-column>
        <el-table-column
          prop="amount1"
          label="数值 1（元）">
        </el-table-column>
        <el-table-column
          prop="amount2"
          label="数值 2（元）">
        </el-table-column>
        <el-table-column
          prop="amount3"
          label="数值 3（元）">
        <