el-table相同数据行单元格合并

背景

项目中列表第一列是名称，需要实现的效果是相同名称的行合并，如图所示：

实现步骤

1.绘制el-table

按照常规的写法绘制一个表格，根据官方文档 element-ui 介绍编写表格合并规则方法。
代码示例中的 span-method

    <el-table v-loading="listLoading" :data="list" :span-method="objectSpanMethod" >
      <el-table-column prop="name" label="name" width="120"></el-table-column>
      <el-table-column prop="Title" label="Title" width="120"></el-table-column>
      <el-table-column prop="Pageviews" label="Pageviews" width="120" align="center"> </el-table-column>
      <el-table-column prop="Status" label="Status" width="110"> </el-table-column>
      <el-table-column prop="created_at" label="Display_time" width="200"></el-table-column>
    </el-table>

2.编写合并方法

2.1 计算合并的行号

1. 在data中定义全局变量indexArray 存储所有合并的行号；
2. 通过传入行号及该行名称，遍及计算该行下方数据相同的行数

  methods: {
    getRows(rowIndex, name) {
      let count = 0
      for (let i = rowIndex; i < this.list.length; i++) {
        if (this.list[i].name === name) {
          count++
        } else {
          break
        }
      }
      return count
    }
  }

2.2 计算合并行号数组indexArray。

在组件mounted构建时计算合并行号数组indexArray

  let count = 0
  for (let rowIndex = 0; rowIndex < this.list.length; ) {
    this.indexArray.push(rowIndex)
    count = this.getRows(rowIndex, this.list[rowIndex].name)
    rowIndex += count
  }

其中，list是整个table的数据来源

2.3 编写行号合并方法

当该行的rowIndex在合并行号数组中时返回合并行数据，否则返回空。

  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        let rowCount = 0
        if (this.indexArray.includes(rowIndex)) {
          rowCount = this.getRows(rowIndex, row.name)
          return {
            rowspan: rowCount,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }
  }

（作者碎碎念）官网也是通过行号来控制合并，我一开始总是想用列表的属性值判断，但是每每都会陷入无限循环的困境，这种实现方式不算好，如果大佬有更好的实现方式欢迎评论，小弟不胜感激！！！

3.全部代码

项目代码不方便公开，这是我简化后的一个完整的实现代码：

<template>
  <div class="app-container">
    <el-table :data="list" :span-method="objectSpanMethod">
      <el-table-column prop="name" label="name" width="120" />
      <el-table-column prop="title" label="Title" width="120" />
      <el-table-column prop="pageviews" label="Pageviews" width="120" />
      <el-table-column prop="status" label="Status" width="110" />
      <el-table-column prop="display_time" label="Display_time" width="200" />
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: '张三',
          title: '文本一',
          status: 'published',
          display_time: '2023-07-14',
          pageviews: 200
        },
        {
          name: '李四',
          title: '文本二',
          status: 'published',
          display_time: '2023-07-14',
          pageviews: 200
        },
        {
          name: '李四',
          title: '文本三',
          status: 'published',
          display_time: '2023-07-14',
          pageviews: 200
        },
        {
          name: '王五',
          title: '文本四',
          status: 'published',
          display_time: '2023-07-14',
          pageviews: 200
        },
        {
          name: '王五',
          title: '文本五',
          status: 'published',
          display_time: '2023-07-14',
          pageviews: 200
        },
        {
          name: '王五',
          title: '文本六',
          status: 'published',
          display_time: '2023-07-14',
          pageviews: 200
        }
      ],
      indexArray: []
    }
  },
  mounted() {
    let count = 0
    for (let rowIndex = 0; rowIndex < this.list.length; ) {
      this.indexArray.push(rowIndex)
      count = this.getRows(rowIndex, this.list[rowIndex].name)
      rowIndex += count
    }
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        let rowCount = 0
        if (this.indexArray.includes(rowIndex)) {
          rowCount = this.getRows(rowIndex, row.name)
          return {
            rowspan: rowCount,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    getRows(rowIndex, name) {
      let count = 0
      for (let i = rowIndex; i < this.list.length; i++) {
        if (this.list[i].name === name) {
          count++
        } else {
          break
        }
      }
      return count
    }
  }
}
</script>