element-ui 合并表格行

element-ui 合并表格行操作

需求描述

动态获取数据后，将ID相同的行，ID合并成一个。

官方方法

rowIndex当前行号 columnIndex当前列号，row表示当前行的内容，column表示当前列的内容。arraySpanMethod返回一个键名为rowspan和colspan的对象，rowspan表示当前格子占的行数，colspan当前格子占的列数。

由此可知道每一行渲染时都会调用当前方法，只不过在渲染过程中设置了它合并的行数和列数，从而得到不同的效果。rowIndex和columnIndex是从0开始，rowIndex=0时，row是数组[0]的元素。

arraySpanMethod({ row, column, rowIndex, columnIndex }) {
   if (columnIndex === 0) {    //用于设置要合并的列
     if (rowIndex % 2 === 0) {   //用于设置合并开始的行号
       return {
         rowspan: 2,　　　　　//合并的行数
         colspan: 1          //合并的列数，设为０则直接不显示
       };
     } else {
       return {
         rowspan: 0,
         colspan: 0
       };
     }
   }
 }

数据处理
由于element一行一行渲染，在渲染的时候每一个格子都会调用合并函数，获取合并函数的返回值来确定当前格子的占据几行几列，所以数据最好以一行一行的格式准备。

//table是一个数组，表示全部的数据
const table = [{
},{//每一个元素是一个对象，表示一行
},{
}]

假设后台传过来的数据是以下的格式，就需要对数据进行。

const table = {
    "123": [
        {
            "name": "张三",
            "number": "123",
        },
        {
            "name": "张三",
            "number": "1234",
        }
    ],
    "1234": [
        {
            "name": "王五",
            "number": "213"
        },
    ]
}
//映射方法
function mapper(): Array<validationResults> {
  const info: Array<validationResults> = [];
  for (const [id, personInfo] of Object.entries(table)) {
    personInfo.forEach((person) => {
      info.push({
        id,
        name: person.name,
        number: person.number,
      });
    });
  }
  return errorInfo;
}

行号合并
首先需要明确的是哪些行的第一列需要合并？id相同的列需要合并(这里的数据是有序的，id相同的挨在一起)
需要合并几列呢？element-ui提供的方法直接返回的是合并的行和列，所以我们需要一个方法来计算合并的行。

生成一个与行数相同的数组记录每一行设置的合并数

const mergerow = [];
//获取需要合并的行号
function getMergeRow(data) {　
  let pos;//记录需要合并的第一行坐标
  for (let i = 0; i < data.length; i++) {
        if (i === 0) {
              mergerow.push(1);
              pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
    if (data[i].id=== data[i - 1].id) {//如果相同表示当前行需要合并
                mergerow[pos] += 1; //合并的行数+1
                mergerow.push(0); //相同的被合并
              } else {//id不同说明，是下一个需要合并的第一行
                mergerow.push(1); 
                pos = i;
              }
        }
    }
};
//element-ui提供的方法
function cellMerge({ row, column, rowIndex, columnIndex }) {
    let _col = 1;
    let _row = 1;
    if (columnIndex === 0) {
      _row = mergerow[rowIndex];
      _col = _row > 0 ? 1 : 0;
    }

    return {
      rowspan: _row,
      colspan: _col,
    };
}

最后的数据表格

<template>
  <div>
 <el-table
      border
      :data="tableData"
      style="width: 100%;max-height: 160px;overflow: auto"
      :span-method="cellMerge">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="number"
        sortable
        label="数值 1">
      </el-table-column>
    </el-table>