el-table 合并单元格

vue2使用el-table合并单元格，包括合并行、合并列

<el-table
              :header-cell-style="handerMethod"
              :span-method="arraySpanMethod"
              @cell-click="handleCellClick"
              :data="tableData"
              style="width: 100%">
              <el-table-column label="工序编码">
                <el-table-column label="工序">
                  <el-table-column
                    prop="type"
                    label="类型"
                    width="80">
                  </el-table-column>
                  <el-table-column
                    prop="pipelineCode"
                    label="流水码"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="profession"
                    label="名称"
                    width="80">
                  </el-table-column>
                  <el-table-column
                    prop="accessory"
                    label=""
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="specification"
                    label="规格（基础信息）"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="unit"
                    label="单位"
                    width="60">
                  </el-table-column>
                </el-table-column>
              </el-table-column>
              <el-table-column
                v-for="(item,index) in  titleList"
                :key="index"
                :label="item.processCode">
                <el-table-column
                  :key="index"
                  :label="item.process">
                  <el-table-column
                    :key="index"
                    label="消耗量">
                    <template slot-scope="scope">
                      {{ item.consume[scope.$index] }}
                    </template>
                  </el-table-column>
                </el-table-column>
              </el-table-column>
            </el-table>

<script>

export default {
  name: 'viewBOM',
  data() {
    return {
      tableData: [
        {
          type: '材料',
          pipelineCode: '111',
          profession: '主料',
          accessory: '辅料',
          specification: '10mm',
          unit: '平方'
        }, {
          type: '材料',
          pipelineCode: '444',
          profession: '专辅',
          accessory: '辅料',
          specification: 'M50',
          unit: '个'
        }, {
          type: '材料',
          pipelineCode: '555',
          profession: '辅料',
          accessory: '辅料',
          specification: 'M30',
          unit: '个'
        }, {
          type: '材料',
          pipelineCode: '666',
          profession: '主料',
          accessory: '辅料',
          specification: '8mm',
          unit: '平方'
        }, {
          type: '人工',
          pipelineCode: '777',
          profession: '装配工',
          accessory: '',
          specification: '',
          unit: '工日'
        }, {
          type: '人工',
          pipelineCode: '888',
          profession: '装配工',
          accessory: '',
          specification: '',
          unit: '工日'
        }, {
          type: '人工',
          pipelineCode: '999',
          profession: '装配工',
          accessory: '',
          specification: '',
          unit: '工日'
        }],
      titleList: [
        {
          processCode: '111',
          process: '装配工1',
          consume: ['0.92(配比)', '1(1.2)', '2(1.2)', '3(1.2)', '-', '-', '6(1.2)']
        },
        {
          processCode: '222',
          process: '主料1',
          consume: [11, 21, 31, 41, 51, 61, 71]
        }
      ]
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    handleNodeClicked(data) {
      console.log('从子组件接收到的数据:', data)
    },
    //合并单位表头
    handerMethod({ row, column, rowIndex, columnIndex }) {
      // 合并第三列和第四列
      if (row[0].level == 3) {
        row[2].colSpan = 2 // 第三列合并两列
        row[3].colSpan = 0 // 第四列不显示
        if (columnIndex === 3) {
          return { display: 'none' } // 隐藏第四列
        }
        // 合并第七列及后面的列的表头
        let startColIndex = 6 // 假设第七列的索引是6
        let colSpan = this.titleList.length
        for (let i = startColIndex; i < startColIndex + colSpan; i++) {
          if (i === startColIndex) {
            row[i].colSpan = colSpan // 第七列合并多列
          } else {
            row[i].colSpan = 0 // 其他列不显示
            if (columnIndex === i) {
              return { display: 'none' } // 隐藏这些列
            }
          }
        }
      }
      return {}
    },
    // 合并单元格
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // 合并第一列（type）
      if (columnIndex === 0) {
        // 检查当前行是否是该类型的第一行
        if (rowIndex === 0 || this.tableData[rowIndex - 1].type !== row.type) {
          let rowspan = 1
          // 计算当前类型的连续行数
          for (let i = rowIndex + 1; i < this.tableData.length; i++) {
            if (this.tableData[i].type === row.type) {
              rowspan++
            } else {
              break
            }
          }
          return {
            rowspan: rowspan,
            colspan: 1
          }
        } else {
          // 如果不是第一行，则隐藏该单元格
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
     // 合并 type 为 '人工' 的行的第三列和第四列
      if (row.type === '人工') {
        if (columnIndex === 2) {
          return {
            rowspan: 1,
            colspan: 2
          }
        } else if (columnIndex === 3) {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
      // 默认返回值
      return {
        rowspan: 1,
        colspan: 1
      }
    },

    handleCellClick(row, column, cell, event) {
      console.log('点击的行数据:', row)
      console.log('点击的列数据:', column)
      console.log('点击的单元格元素:', cell)
      console.log('事件对象:', event)
      // 在这里添加你需要的逻辑
    }
  }
}
</script>

<style scoped lang="scss">

/deep/ .el-table__header th {
  text-align: center;
}
</style>