el-table复杂合并行操作

需求如下图：

使用el-table一顿操作猛如虎，发现官网文档写的不知道是些啥，demo也让人有点摸不着头脑，看了网上的一些合并表格的例子，都没怎么看懂，于是在此捋一下自己的思路。

首先分析这样的表格应该如何处理，这里是比较简单的合并某几项数据中某几列，因此要对比出当前数据中有几项的某个值是相同的，这里拿name举例，解析步骤：

①遍历表格数据，用一个变量（此例为spanArr）记录每一行的rowspan和colspan
②判断前后两项的name相同，后面那一项的rowspan和colspan都设为0
③找到name相同的第一项，rowspan值+1
④前后不相同的项rowspan和colspan设置默认值

这个例子应对的业务需要后端配合将相同数据排列至一起，如果数据不按顺序排列，就需要先对数据进行重新排列，然后再使用这种方式去合并就可以了，具体代码如下：

<template>
  <div class="inventoryTable">
    <el-table
        :data="tableData"
        :span-method="mergeTableSpanMethod"
        border
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="id"
          label="原料编号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="提醒">
      </el-table-column>
      <el-table-column
          prop="name"
          label="原料名称">
      </el-table-column>
      <el-table-column
          prop="amount2"
          label="原料类型">
      </el-table-column>
      <el-table-column
          prop="amount3"
          label="单位">
      </el-table-column>
      <el-table-column
          prop="amount3"
          label="规格">
      </el-table-column>
      <el-table-column
          prop="amount3"
          label="库存总量">
      </el-table-column>
      <el-table-column
          prop="amount3"
          label="冻结库存">
      </el-table-column>
      <el-table-column
          prop="amount3"
          label="可用库存">
      </el-table-column>
      <el-table-column
          prop="amount3"
          label="安全库存">
      </el-table-column>
      <el-table-column
          prop="amount3"
          label="入库均价">
      </el-table-column>
      <el-table-column
          prop="amount3"
          label="入库成本">
      </el-table-column>
      <el-table-column
          prop="amount3"
          label="市价值">
      </el-table-column>
      <el-table-column
          prop="amount3"
          width="150"
          label="库存成本总额">
      </el-table-column>
      <el-table-column
          prop="amount3"
          label="库存总额">
      </el-table-column>
      <el-table-column
          prop="amount3"
          width="150"
          label="生产日期">
      </el-table-column>
      <el-table-column
          prop="amount3"
          width="150"
          label="到期提醒">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "inventoryTable",
    data() {
      return {
        spanArr: [], // 存放表格日期单元格的rowspan和colspan信息
        tableData: [{ // 表数据
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: '张晓松',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }, {
          id: '12987126',
          name: '张晓松',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }, {
          id: '12987126',
          name: '张晓松',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }]
      }
    },
    mounted() {
      this.spanArr = this.getSpanData();
    },
    methods: {
      // 遍历分析表格数据 记录每一行的rowspan和colspan
      getSpanData() {
        let spanArr = [];
        for (let i = 0; i < this.tableData.length; i++) {
          let obj = {};
          if (i === 0) {
            // 第一项直接设置默认的值
            obj.rowspan = 1;
            obj.colspan = 1;
            spanArr.push(obj);
          } else {
            if (this.tableData[i].name === this.tableData[i - 1].name) {
              // 前后两项的name相同 后面那一项rowspan和colspan都设置为0
              obj.rowspan = 0;
              obj.colspan = 0;
              spanArr.push(obj);

              // 找到name相同项中第一项 rowspan值加1
              let index = this.tableData.findIndex((item) => item.name === this.tableData[i].name);
              ++spanArr[index].rowspan;
            } else {
              // 前后不相同 一个新的值 设置默认值就好
              obj.rowspan = 1;
              obj.colspan = 1;
              spanArr.push(obj);
            }
          }
        }
        return spanArr;
      },

      // 合并表格
      mergeTableSpanMethod({row, column, rowIndex, columnIndex}) {
        // row:行对象，带有一行所有数据，column:列对象
        // rowIndex:行索引，columnIndex:列索引
        // 加载表格时从（0，0）开始，（0，1）···（1，0）,(1,1)···依次获取数据

        // 需要合并行的列都列出来
        if (columnIndex === 1 || columnIndex === 3 || columnIndex === 4 || 
        columnIndex === 5 || columnIndex === 6 || columnIndex === 7 || 
        columnIndex === 8 || columnIndex === 10 || columnIndex === 13) {
          let rowspan = this.spanArr[rowIndex].rowspan;
          let colspan = this.spanArr[rowIndex].colspan;
          return {rowspan, colspan};
        }
      },

    }
  }
</script>

<style scoped>

</style>