树形数据拍平el-table合并单元格展示（合并行）

一、动态表头树形接口数据 拍平展示

<template>
  <el-table
    style="width: 100%"
    :data="exactData"
    :span-method="objectSpanMethod"
    border
  >
    <el-table-column v-for="item in deep" :label='`${item}级指标`' :prop="`nodeName${item}`" :key="item">
      <template slot-scope="scope">
        <template v-if="scope.row[`nodeName${item}`]">
          <span class="font-size-media">{{scope.row[`nodeName${item}`]}}</span>
        </template>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'MergeTable',
  data () {
    return {
      tableData: [
        {
          nodeId: '74a3c21e92b84b46a557487d2a963ee8',
          nodeName: '小张12-16加减分项',
          parentNodeId: '',
          children: [
            {
              nodeId: 'e12313d8046c4caeb16cd77d51b05cc2',
              nodeName: '12-24小张加減分项超级复杂没办法的拉呜呜',
              parentNodeId: '74a3c21e92b84b46a557487d2a963ee8',
              children: [
                {
                  nodeId: 'd62a82ca0c0845efaeac4ba206fa9ac3',
                  nodeName: '12-24-2小张比较复杂zzz',
                  parentNodeId: 'e12313d8046c4caeb16cd77d51b05cc2',
                  children: [
                    {
                      nodeId: 'd62a82ca0c0845efaeac4ba206fa9ac3dqweqwe',
                      nodeName: '12-24-2小张比较复zzzz杂',
                      parentNodeId: 'd62a82ca0c0845efaeac4ba206fa9ac3'
                    }
                  ]
                },
                {
                  nodeId: 'c883d721c1204c09a439d90f0ec4eed4',
                  nodeName: '12-24-1小张比较复杂wewqezxcsadwqeqerewq',
                  parentNodeId: 'e12313d8046c4caeb16cd77d51b05cc2'
                }
              ]
            },
            {
              nodeId: 'xzxsaddqwdrwqreewrwrqw',
              nodeName: '12二级指标222我的团啊啊啊大萨达按时 ',
              parentNodeId: '74a3c21e92b84b46a557487d2a963ee8'
            }
          ]
        },
        {
          nodeId: 'e12313d8046c4caeb16cd77d51b05cc2',
          nodeName: '12-24小张加減分项超级复杂没办法的拉呜呜',
          parentNodeId: '74a3c21e92b84b46a557487d2a963ee8'
        }
      ],
      changeData: [],
      exactData: [],
      deep: 1
    }
  },
  mounted () {
    this.expandTree(this.tableData, [])
    this.getDepth(this.tableData, 1)
    this.getExactData(this.tableData)
    this.getNodeName(this.exactData)
  },
  methods: {
    getDepth (tableData, deep) {
      tableData.forEach(item => {
        item.deep = deep
        if (item.children) {
          this.getDepth(item.children, deep + 1)
        }
      })
      if (this.deep < deep) {
        this.deep = deep
      }
    },
    expandTree (tableData, currentParent) {
      for (const item of tableData) {
        item.parentNodeArr = currentParent
        if (item.children) {
          const newArr = [...currentParent]
          newArr.push(item.nodeName)
          item.children = this.expandTree(item.children, newArr)
        }
      }
      return tableData
    },
    getExactData (data) {
      data.forEach(item => {
        if (!item.children) {
          this.exactData.push(item)
        } else {
          this.getExactData(item.children)
        }
      })
    },
    getNodeName (data) {
      for (let i = 0; i < data.length; i++) {
        const item = data[i]
        for (let j = 0; j < this.deep; j++) {
          item[`nodeName${j + 1}`] = item.parentNodeArr[j] || '/'
        }
        item[`nodeName${item.deep}`] = item.nodeName
      }
    },
    // 表格合并方法
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      /**
       * {row} 每一行的数据
       * {rowIndex}}每一行的索引
       * {columnIndex} 每一列的索引
       * */
      if (columnIndex !== this.deep - 1) { // 根据指标名称合并
        if (row[`nodeName${columnIndex + 1}`] !== '/') {
          if (rowIndex === 0 || row[`nodeName${columnIndex + 1}`] !== this.exactData[rowIndex - 1][`nodeName${columnIndex + 1}`]) {
            let rowspan = 0
            this.exactData.forEach((item) => {
              if (item[`nodeName${columnIndex + 1}`] === row[`nodeName${columnIndex + 1}`]) {
                rowspan += 1
              }
            })
            return [rowspan, 1]
          }
          return [0, 0]
        }
      }
    }
  }
}
</script>

<style scoped>

</style>

表头是死的，直接根据索引来合并

getSpanId (data) {
  // data就是我们从后台拿到的数据
  for (let i = 0; i < data.length; i++) {
    if (i === 0) {
      this.spanArr0.push(1)
      this.pos_0 = 0
    } else {
      // 判断当前元素与上一个元素是否相同
      if (data[i].APTITUDEKINDNAME === data[i - 1].APTITUDEKINDNAME) {
        this.spanArr0[this.pos_0] += 1
        this.spanArr0.push(0)
      } else {
        this.spanArr0.push(1)
        this.pos_0 = i
      }
  }
},

objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 1) {
    // 合并资质类别
    const _row = this.spanArr0[rowIndex]
    const _col = _row > 0 ? 1 : 0
    return {
      rowspan: _row,
      colspan: _col
    }
  }
}