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

problemRecord

已于 2023-07-14 14:30:10 修改

阅读量2.6k

点赞数 2

文章标签： elementui vue.js

于 2023-07-14 14:27:02 首次发布

本文链接：https://blog.csdn.net/problemRecord/article/details/131718956

版权

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 计算合并的行号

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

  methods: {
   
    getRows(rowIndex, name) {
   
      let count = 0
      for (let i = rowIndex; i < this.list.length; i++) {
   
        if (this.list