通过tl-table行合并实现多样化表格

<template>
   <el-table class="common-table"
                  :data="scoringTableData"
                  :span-method="objectSpanMethod"
                  :header-cell-style="{'text-align':'center'}"
                  :cell-style="{'text-align':'center'}"
                  border>
          <el-table-column label="评价指标">
            <el-table-column
                prop="title"
                label=""
                width="120">
            </el-table-column>
            <el-table-column
                prop="type"
                label="总分"
                width="120">
            </el-table-column>
          </el-table-column>
          <el-table-column label="分值">
            <el-table-column
                prop="total"
                label="120"
                width="80">
            </el-table-column>
          </el-table-column>
          <el-table-column label="评分内容">
            <el-table-column
                prop="content"
                label=""
                width="550">
            </el-table-column>
          </el-table-column>
          <el-table-column label="得分">
            <el-table-column
                prop="score"
                label=""
                width="80">
            </el-table-column>
          </el-table-column>
          <el-table-column label="备注">
            <el-table-column
                prop="remark"
                label=""
                width="200">
            </el-table-column>
          </el-table-column>
        </el-table>
</template>
<script>
export default {
  data() {
    return {
      scoringTableData: [
        {
          title: '基地生产',
          type: '方案编制',
          total: '10',
          content: '编制基地中长期发展规划，并通过专家评审(5分），未编制中长期发展规划(0分)；编制年度作业设计方案，且符合基地发展规划，并经省级林业行政主管部门组织专家审核(5分)，未编制年度作业设计方案和未经批复的(0分)',
          score: '',
          remark: ''
        }, {
          title: '基地生产',
          type: '执行情况',
          total: '10',
          content: '种子园、种质资源收集区、母树林、采穗圃、试验林等抚育与新建任务按作业设计方案和下达计划执行实施(10分)；未按照作业设计方案和下达计划执行实施的，一项扣2分，扣完为止。',
          score: '',
          remark: ''
        }, {
          title: '基地生产',
          type: '质量控制',
          total: '10',
          content: '作业效果达标(施肥、除草、病虫害防治、树体管理等与技术规程和作业设计对照全部符合)(10分)，不达标(实地检查或档案生产记录检查发现不实的)一项扣2分，扣完为止。',
          score: '',
          remark: ''
        }, {
          title: '基础设施',
          type: '设施维建',
          total: '5',
          content: '生产工程(作业道、喷滴灌、生产用房、晾晒场、标识、宣传牌等)设施按作业设计方案的计划全部完成(5分)；未完成(实地检查或档案生产记录检查发现不实的)一项扣1分，扣完为止。',
          score: '',
          remark: ''
        }, {
          title: '基础设施',
          type: '设备购置',
          total: '5',
          content: '授粉、采种、制种、除草、病虫害防治等生产设备购置按作业设计方案的计划全部完成(5分)；未完成(实地检查或档案生产记录检查发现不实的)一项扣1分，扣完为止。',
          score: '',
          remark: ''
        }, {
          title: '科技支撑',
          type: '生产指导',
          total: '5',
          content: '基地与技术支撑专家签订协议或颁发聘书，专家每年实地生产指导2次及2次以上的(5分)；签订协议或聘书，每年实地生产指导1次(2分)，无(0分)。',
          score: '',
          remark: ''
        }, {
          title: '奖励加分',
          type: '20分',
          total: '5',
          content: '基地良种产量高出近3年最高产量的30%',
          score: '',
          remark: ''
        }, {
          title: '奖励加分',
          type: '20分',
          total: '5',
          content: '种质资源收集、建园技术取得突破性进展或处于全国领先水平',
          score: '',
          remark: ''
        }, {
          title: '奖励加分',
          type: '20分',
          total: '5',
          content: '品种选育与推广中，获得专利、注册商标等',
          score: '',
          remark: ''
        }, {
          title: '奖励加分',
          type: '20分',
          total: '5',
          content: '基地开展创新性实用技术课题研究，并获得省级以上奖励',
          score: '',
          remark: ''
        }],
      spanTitleArr: [],
      spanTypeArr: [],
    };
  },
  mounted: function() {
    this.getSpanArr(this.scoringTableData);
  },
  methods: {
    getSpanArr(data) {
       let pos;
       for (let i = 0; i < data.length; i++) {
        if (i === 0) {//如果是第一条记录（索引为0），向数组中加入１，并设置索引位置；
          this.spanTitleArr.push(1);
          pos = 0
        } else {
          // 判断当前元素与上一个元素的title是否相同
          if (data[i].title === data[i - 1].title) {
            this.spanTitleArr[pos] += 1;//将前一位元素＋１，表示合并行数＋１
            this.spanTitleArr.push(0);//向spanTitleArr中添入元素0
          } else {
            this.spanTitleArr.push(1);
            pos = i;
          }
        }
      }
      let pos2;
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {//如果是第一条记录（索引为0），向数组中加入１，并设置索引位置；
          this.spanTypeArr.push(1);
          pos2 = 0
        } else {
          // 判断当前元素与上一个元素的type是否相同
          if (data[i].type === data[i - 1].type) {
            this.spanTypeArr[pos2] += 1;//将前一位元素＋１，表示合并行数＋１
            this.spanTypeArr.push(0);//向spanTypeArr中添入元素0, 表示该行不显示
          } else {
            this.spanTypeArr.push(1);
            pos2 = i;
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {//第1列根据title合并
        const _row = this.spanTitleArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return { // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        }
      }
      if (columnIndex === 1) {//第2列根据type合并
        const _row = this.spanTypeArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return { // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        }
      }
    }
  }
};
</script>

实现效果：
参考：https://www.cnblogs.com/mmzuo-798/p/11686021.html