el-table合并单元格:span-method的使用

最新推荐文章于 2025-03-27 15:15:16 发布

软件测试小菜鸟正在更新中

最新推荐文章于 2025-03-27 15:15:16 发布

阅读量3.7k

点赞数

分类专栏： element ui 文章标签： elementui

本文链接：https://blog.youkuaiyun.com/weixin_43258184/article/details/124147015

版权

element ui 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了如何使用 Element UI 的 el-table 组件通过 span-method 属性来实现表格单元格的合并。通过在表格中添加 :span-method='arraySpanMethod' 属性，并在 Vue 文件的方法部分定义 arraySpanMethod 函数，可以实现动态合并表格行和列的效果。

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

合并前是这样：
在这里插入图片描述
合并后是这样：

实现方法：
① el-table里添加属性:span-method=“arraySpanMethod”

 <el-table
      :data="tableData"
      :span-method="arraySpanMethod"
      border
      stripe
      fit
    >

②vue文件的 method里定义arraySpanMethod

 arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 3 === 0) {
          return [3, 1];
        } else {
          return [0, 0];
        }
      }
    }