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
      },
  
  }