element-ui table :span-method 行合并 动态数据处理

element-ui官网提供了表格行合并的方法，但是官方demo过于简单用取余的方法将行两两合并 ，实际开发中需求显然复杂的多，今天我就行记录一下我在开发中从获取动态数据后，对数据进行处理，并进行啊行合并的方法：

1.学习官方demo

Element - The world's most popular Vue UI framework 先看懂官方的案例再自行上手 案例比较简单不多解释了

2.需求

从后台获取的数据

[{"orgId":59,"activityId":3,"name":"a","num":1,"orgName":"逐日信息科技"},
{"orgId":59,"activityId":3,"name":"b","num":2,"orgName":"逐日信息科技"},
{"orgId":59,"activityId":3,"name":"c","num":13,"orgName":"逐日信息科技"},
{"orgId":59,"activityId":3,"name":"d","num":12,"orgName":"逐日信息科技"},
{"orgId":66,"activityId":3,"name":"e","num":11,"orgName":"逐日信息科技1"},
{"orgId":66,"activityId":3,"name":"f","num":11,"orgName":"逐日信息科技1"}]

需要的展示效果 （需要将orgId相同数据的orgName合并展示 ）

3.上代码 

html表格代码很简单

<el-table
    :data="participatorList"
    :span-method="objectSpanMethod"
    border
    style="width: 100%; margin-top: 20px;"
>
    <el-table-column prop="orgName" label="接入方"> </el-table-column>
    <el-table-column prop="name" label="报名人员名称"> </el-table-column>
    <el-table-column prop="num" label="报名人分数"> </el-table-column>
</el-table>

先附上处理后的数据 多了一个rowspan属性以标记合并行的位置信息

[{"orgId":59,"activityId":3,"name":"a","num":1,"orgName":"逐日信息科技","rowspan":4},
{"orgId":59,"activityId":3,"name":"b","num":2,"orgName":"逐日信息科技","rowspan":0},
{"orgId":59,"activityId":3,"name":"c","num":13,"orgName":"逐日信息科技","rowspan":0},
{"orgId":59,"activityId":3,"name":"d","num":12,"orgName":"逐日信息科技","rowspan":0},
{"orgId":66,"activityId":3,"name":"e","num":11,"orgName":"逐日信息科技1","rowspan":2},
{"orgId":66,"activityId":3,"name":"f","num":11,"orgName":"逐日信息科技1","rowspan":0}]

从后台获取并处理数据的方法 以及合并展示的方法

    
    //获取并处理数据
    handleParticipator() {
      list({}).then((res) => {//发送http请求
        this.participatorList = res.rows;
        
        //处理数据
        for (let i = this.participatorList.length - 1; i > 0; i--) {
          //从后向前遍历
          if (!this.participatorList[i].rowspan) {
            //设置初始值(可理解为：每个数据项必定占一行)
            this.participatorList[i].rowspan = 1;
          }
          if (i > 0 &&
            this.participatorList[i].orgId == this.participatorList[i - 1].orgId
          ) {
            //当前公司名与前一个数据的公司相同时 设置rowspan（前数据一项与下一行的相同时 合并一行）
            this.participatorList[i - 1].rowspan =
              this.participatorList[i].rowspan + 1;
            this.participatorList[i].rowspan = 0;
          }
        }
      });
    },



    //合并展示
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        return {
          rowspan: row.rowspan,
          colspan: 1,
        };
      }
    },