elementUI组件中合并单元格

<!--
 * @Description: elment table表单合并单元格
 * @Version: 
 * @Autor: Muchen
 * @Date: 2021-08-12 09:38:08
 * @LastEditors: Muchen
 * @LastEditTime: 2021-08-12 10:40:13
-->
<template>
  <div class="app-container home">
    <el-card class="box-card">
       <el-table :data="tableData" :span-method="objectSpanMethod" border>
          <el-table-column prop="id" label="ID" width="180" align="center"></el-table-column>
          <el-table-column prop="name" label="姓名" align="center"></el-table-column>
          <el-table-column prop="amount"  label="数值" align="center"></el-table-column>
          <el-table-column label="操作" fixed="right" width="180" align="center">
               <template>
                  <el-button  type="text"  size="small" >修改</el-button>
                  <el-button  type="text"  size="small" >删除</el-button>
              </template>
          </el-table-column>
        </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "tableRow",
  data() {
    return {
      rowspan: [],
      tableData: [
        {
          id: 1,
          name: "name-111",
          data: [{ amount: 100 }, { amount: 200 }, { amount: 300 }]
        },
        { id: 2, name: "name-222", data: [{ amount: 1002 }, { amount: 2002 }] },
        {
          id: 3,
          name: "name-333",
          data: [
            { amount: 1003 },
            { amount: 2003 },
            { amount: 3003 },
            { amount: 3004 }
          ]
        }
      ]
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      let data = this.tableData;
      let arr = []; //存放格式后的数据
      let rowspan = []; //存放数组每行的 合并row 数据
      data.forEach(item => {
        //debugger
        for (let i = 0; i < item.data.length; i++) {
          let params = {...item, ...item.data[i]}; //合并数据item与item.data[i]的数据，构成新的行数据
          params.combineNum = item.data.length;    //获取合并的 行数（row -> 取item的子数组长度）
          delete params.data; //删除 rdata中的data属性; item属性中存在data，我们又获取了 item.data[i] 数据，所以此属性没用了删掉 
          console.log("delete params->", params); //通过循环获取到所有数据列表
          arr.push(params); //存储格式好的数据
          // 生成合并信息的数组 [3, 0, 0, 2, 0, 4, 0, 0, 0] 其中的0代表隐藏
          if (i == 0) {
            rowspan.push(item.data.length);
          } else {
            rowspan.push(0);
          }
        }
      });
      this.tableData = arr; //处理好格式的 arr 进行赋值
      console.log("tableData->", this.tableData);
      console.log("rowspan->", rowspan);
      this.rowspan = rowspan;
    },
    
    //单元格合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      //行，列，行下标，列下标( 控制要合并的列 )
      if ([0, 1,3].includes(columnIndex)) {
        const _row = this.rowspan[rowIndex];
        const _col = _row > 0 ? 1 : 0; // 如果这一行隐藏了，这列也隐藏
        return {
          rowspan: _row, //合并的行数
          colspan: _col //合并的列数，设为０则直接不显示
        };
      }
    },
  }
};
</script>