element -table，多行或列合并

需求：后端返回的表格数据，如果某列值一样，前端表格样式需要合并他们，需要合并的列的行数未知（所以需要有数据后遍历后端数据对需要合并的属性进行计数）即动态遍历表格合并

效果
-

重点方法；table自带的:span-method="objectSpanMethod"方法

代码环境：vue2 ，element

代码

// tempalte 里
<el-table
      :data="tableData"
      style="width: 100%"
      :span-method="objectSpanMethod"
    >
	  <el-table-column prop="Name" label="名称" align="center"></el-table-column>  
      <el-table-column prop="Level" label="等级" align="center" ></el-table-column>  
	  <el-table-column prop="currenttime" label="时间" align="center" ></el-table-column>  
</el-table>

// script
data(){
     
	return{
     
		tableData：[
		{
     
          Name: 'AAA',
          Level: '1',
          currenttime: '2024-1-29',
        },
        {
     
          Name: 'AAA',
          Level: '2',
          currenttime: '2024-1-29',
        },
       {
     
          Name: 'AAA',
          Level: '2',
          currenttime: '2024-1-29',
        },
        {
     
          Name: 'CCC',
          Level: '2',
          currenttime: '2024-1-29',
        },
      ],

	}
},

method:{
     
 // 表格合并列
    objectSpanMethod({
       row, column, rowIndex, columnIndex }){
     
      // 判断第一列的行合并
      if (columnIndex === 0 ) {
     
          const _row = this.getSpanArr(this.tableData,'Name')[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
     
              rowspan: _row,
              colspan: _col
          }
      }

      // 判断第二列的行合并
      if (columnIndex === 1 ) {
     
          const _row = this.getSpanArr(this.tableData,'Level','Name')[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
     
              rowspan: _row,
              colspan: _col
          }
      }

    },
    // 计算合并行数
    getSpanArr(data,key,faKey) {
     
      /**
       * data 表身数据
       * key当前需要合并的属性名称
       * faKey ：如果有多列属性需要行合并，此时需要判断第二个属性需不需再第一个属性相同的条件下才合并，不需要就不用传，需要就穿第一个属性名
       * 
       */
       
      // 遍历数据
      let spanArr=[]
      let pos = 0
      for (let i = 0; i < data.length; i++) {
     
          // 如果是第一个数据，就将列表spanArr添加一个1，表示暂时只有一个名字相同的、且将索引pos赋值为0
          if (i === 0) {
     
              spanArr.push(1);
              pos = 0
          } else {
     
              // 判断当前元素与上一个元素是否相同（且只有同faKey 下的第二列才能合并，不同faKey 下的第二列重新计数,如果不需要这样判断，就去除&&后面的判断）
             
              if (data[i][key] === data[i - 1][key] && data[i][faKey] === data[i - 1][faKey] ) {
     
                  // 如果相同就将索引为 pos 的值加一
                  spanArr[pos] += 1;
                  // 且将数组添加 0 
                  spanArr.push(0);
              } else {
     
                  // 如果元素不同了，就可以通过索引为 pos 的值知晓应该需要合并的行数
                  // 同时，我们再次添加一个值1，表示重新开始判断重复姓名的次数
                  spanArr.push(1);
                  // 同时 索引加一
                  pos = i;
              }
          }
      }
      console.log("索引数组：")
      console.log(spanArr,key)
      return spanArr
    },

}