el-table复杂横向+纵向多级表头+修改表格样式

不全，仅做个人记录

 效果：

<template>
  <div style="">
    <el-table
      class="main-table"
      :data="tableData"
      style="width: 90%"
      :span-method="handleSpanMethod"
    >
      <!-- 纵向表头 -->
      <el-table-column label="分析" width="140">
        <el-table-column label="标准" width="140" prop="name"></el-table-column>
      </el-table-column>
      <!-- 横向表头和数据列 -->
      <el-table-column label="名称1">
        <el-table-column prop="value1" label="名称1-1">
          <el-table-column prop="value1" label="值1-1"></el-table-column>
        </el-table-column>
        <el-table-column prop="value1" label="名称1-1">
          <el-table-column prop="value2" label="值1-1"></el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column label="名称2">
        <el-table-column prop="value1" label="名称1-1">
          <el-table-column prop="value3" label="值1-1"></el-table-column>
        </el-table-column>
        <el-table-column prop="value1" label="名称1-1">
          <el-table-column prop="value4" label="值1-1"></el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column label="其他1">
        <el-table-column prop="value3" label="其他1-1"></el-table-column>
      </el-table-column>
      <el-table-column label="其他2"></el-table-column>
      <el-table-column label="其他3"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '纵向表头1',
          value1: 'A111',
          value2: 'B1',
          value3: 'C1',
          value4: 'D1',
        },
        {
          name: '纵向表头1',
          value1: 'A1222',
          value2: 'B122',
          value3: 'C12',
          value4: 'D12222',
        },
        {
          name: '纵向表头2',
          value1: 'A2-3',
          value2: 'B233',
          value3: 'C233',
          value4: 'D233',
        },
        {
          name: '纵向表头2',
          value1: 'A2-2',
          value2: 'B2',
          value3: 'C2',
          value4: 'D2',
        },
        {
          name: '纵向表头2',
          value1: 'A2-3',
          value2: 'B2',
          value3: 'C2',
          value4: 'D2',
        },
        {
          name: '纵向表头3',
          value1: 'A2-3',
          value2: 'B2',
          value3: 'C2',
          value4: 'D2',
        },
        {
          name: '纵向表头4',
          value1: 'A2-3',
          value2: 'B2',
          value3: 'C2',
          value4: 'D2',
        },
        {
          name: '纵向表头4',
          value1: 'A2-3',
          value2: 'B2',
          value3: 'C2',
          value4: 'D2',
        },
        // 添加更多数据项
      ],
    }
  },

  mounted() {},

  methods: {
    handleSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 判断哪一列 如果需要处理多了 使用 || 进行处理即可
      if (columnIndex === 0) {
        const _row = this.flitterDatas(this.tableData).one[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col,
        }
      }
    },
    /**合并表格的第一列，处理表格数据 */
    flitterDatas(arr) {
      let spanOneArr = []
      let concatOne = 0
      arr.forEach((item, index) => {
        console.log(item, index)
        if (index === 0) {
          spanOneArr.push(1)
        } else {
          //注意这里的data是表格绑定的字段，根据自己的需求来改
          if (item.name === arr[index - 1].name) {
            //第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1
            spanOneArr.push(0)
          } else {
            spanOneArr.push(1)
            concatOne = index
          }
        }
      })
      return {
        one: spanOneArr,
      }
    },
  },
}
</script>
<style scoped>
::v-deep .main-table {
  border-bottom: 1px solid #ccc !important;
  border-right: 1px solid #ccc !important;
}
::v-deep .main-table .el-table__cell {
  border: 1px solid #ccc;
}
::v-deep .el-table th {
  /* 表头字体大小 */
  /* font-size: 18px !important; */
}
::v-deep .el-table .el-table__header th,
.el-table .el-table__header tr,
.el-table .el-table__header td {
  /* 表头颜色 */
  background: #f1f1f1 !important;
}
::v-deep .main-table .cell {
  /* 表格全局字体颜色 */
  /* color: red !important; */
  /* 字体居中 */
  text-align: center;
}
::v-deep .main-table .el-table__empty-block{
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
</style>