element el-table 表格行列合并[{class1:‘1101‘,arr1:[1,2,3,5],class2:‘1102‘,arr2:[4,5,6],name:‘h‘}]

项目场景：

后台给的数据格式为：data=[{ name: ‘1101’, arr: [1,2,3], brr: [4,5,6,8] }]，arr,brr,crr里面的数据个数不一致，将其渲染到表格上，并合并行，效果如下：

---

关键步骤

如何将arr: [1,2,3]改为为三行，处理数据如下

var aaa=[
  {name:'小丽', arr:[1,2,3,0], brr:[4,5,6], crr:[7,8,9]},
  {name:'阿呆', arr:[7,7,9,2], brr:[1,5,6], crr:[7,7,9]}
]
var bbb=[]
aaa.forEach(item => {
  item.arr.forEach((item1,index) => {
    bbb.push({
      name: item.name,
      arr: item1,
      brr: item.brr[index],
      crr: item.crr[index]
    })
  })
})

---

解决方案：

提示：这里填写该问题的具体解决方案：

<!--
 * @Description: elment table表单合并单元格
-->
<template>
  <div class="app-container home">
    <el-card class="box-card">
      <el-table :data="tableData" :span-method="objectSpanMethod" border>
        <el-table-column prop="class1" label="样本一" width="180" align="center"></el-table-column>
        <el-table-column prop="data1" label="数值1" align="center"></el-table-column>
        <el-table-column prop="class2" label="样本2" width="180" align="center"></el-table-column>
        <el-table-column prop="data2" label="数值2" align="center"></el-table-column>
        <el-table-column prop="userName" label="用户名" align="center"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'TableSpan',
  data () {
    return {
      rowspan: [],
      tableData: [
        { class1: 'bj705722', class2: 'b98', userName: '刘德华', data1: [10, 35, 1, 3, 5], data2: [1, 2, 3] },
        { class1: 'bj705735', class2: 'b33', userName: '谭维维', data1: [20, 10, 22], data2: [4, 2, 2] },
        { class1: 'bj705967', class2: 'b57', userName: '阿娇', data1: [20, 10, 22], data2: [4, 2, 2] },
        { class1: 'bj705490', class2: 'b21', userName: '刘涛', data1: [22, 88, 19, 4], data2: [9, 1, 0] }
      ]
    };
  },
  created () {
    this.initData();
  },
  methods: {
    initData () {
      const data = this.tableData;
      const arr = []; // 存放格式后的数据
      const rowspan = []; // 存放数组每行的 合并row 数据

      data.forEach(item => {
        // 1、计算每个对象内数组的最大index
        let maxIndex = 0;
        for (const key in item) {
          if (Array.isArray(item[key])) {
            const len = item[key].length;
            maxIndex = maxIndex > len ? maxIndex : len;
          }
        }
        // 2、重新整理表格行，每行重新添加数据
        for (let i = 0; i < maxIndex; i++) {
          arr.push({
            class1: item.class1,
            data1: item.data1[i],
            class2: item.class2,
            data2: item.data2[i],
            userName: item.userName,
            combineNum: maxIndex
          });
          // 3、生成合并信息的数组 [3, 0, 0, 2, 0, 4, 0, 0, 0] 其中的0代表隐藏
          if (i === 0) {
            rowspan.push(maxIndex);
          } else {
            rowspan.push(0);
          }
        }
      });
      this.tableData = arr; // 处理好格式的 arr 进行赋值
      console.log('tableData->', this.tableData);
      this.rowspan = rowspan;
      console.log('rowspan->', rowspan);
    },

    // 单元格合并
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      // 行，列，行下标，列下标( 控制要合并的列 )
      // 表示[0, 2, 4]这两列需要做行合并
      if ([0, 2, 4].includes(columnIndex)) {
        const _row = this.rowspan[rowIndex];
        const _col = _row > 0 ? 1 : 0; // 如果这一行隐藏了，这列也隐藏
        return {
          rowspan: _row, // 合并的行数
          colspan: _col // 合并的列数，设为０则直接不显示
        };
      }
    }
  }
};
</script>

<style scoped lang="scss">
</style>