el-table 合并相同行（二维数组）|【elementUI中el-table中span-method 中传递自定义参数】

吴小花的博客

已于 2023-10-18 11:12:11 修改

阅读量1.2k

点赞数 3

分类专栏： Web前端开发 element-ui 文章标签： elementui vue.js javascript

于 2023-02-20 16:23:04 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_39089928/article/details/129126672

版权

Web前端开发同时被 2 个专栏收录

43 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

element-ui

18 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何在Vue.js项目中使用ElementUI的el-table组件通过span-method方法实现二维数组的行合并。展示了核心代码及完整示例，包括方法实现和表格配置，帮助开发者理解如何传递自定义参数以合并相同名称的单元格。

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

1.效果

核心代码展示：

1.method 里面的方法

    // 合并单元格
    flitterData(arr) {
      const spanOneArr = []
      let concatOne = 0
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1)
        } else {
          if (item.name === arr[index - 1].name) { // 第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1
            spanOneArr.push(0)
          } else {
            spanOneArr.push(1)
            concatOne = index
          }
        }
      })
      return {
        one: spanOneArr
      }
    },
    objectSpanMet

了解本专栏