vue 表格动态合并行和列

<template>
    <div>
        <el-table class="table-container" v-loading="loading2" :data="tableData2" :span-method="objectSpanMethod">
          <el-table-column prop="name" label="考核项目" align="center">
          </el-table-column>
          <el-table-column prop="content" label="考核内容" align="center">
          </el-table-column>
          <el-table-column prop="standard" label="评分标准" align="left" width="740">
          </el-table-column>
          <el-table-column prop="score" label="分值" align="center" width="140">
          </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
  name: 'component_name',
  data () {
    return {
      loading2: false,
      tableData2: [这里数据就不写了],
      // 行合并数据和列合并数据
      spanRowArrs: [],
      spanColArrs: [],
      pos: 0 //角标索引
    };
  },
  methods: {
    //data==>后端返回表格数据
    //prop ==> 依据前端表格渲染的prop值,按顺序传入数组 
    //例如:prop=['name','score','standard','content']

    // 1 处理纵向数据
    getSpanArr(data,prop ) {
      var spanArr = [];
      for (var j=0 ;j<prop.length;j++) {
        for (var i = 0; i < data.length; i++) {
          if (i === 0) { //第一行数据不进行改变
            spanArr.push(1);
            this.pos = 0;
          }else if(prop[j] === 'score' || prop[j] === 'standard' || prop[j] === 'content') {    //当有字段不需要改变时,写入该判断
            spanArr.push(1);
            this.pos = 0;
          }else {
            //判断表格内相同prop时,数据是否与上行相等
            if (data[i][prop[j]] === data[i - 1][prop[j]]) {
              spanArr[this.pos] += 1;
              spanArr.push(0);
            } else {
              spanArr.push(1);
              this.pos = i;
            }
          }
        }
        //把生成的列数据插入spanRowArrs
        this.spanRowArrs.push(spanArr)
        spanArr = []
      }
    },

    // 2. 处理横向数据
    getRowSpanArr(data,prop) {
      var spanArr = [];
      for (var i = 0; i < data.length; i++) {
        for (var j = 0; j < prop.length; j++) {
         //判断表格数据是否与上列相等
          if (data[i][prop[j]] === data[i][prop[j - 1]]) {
            prop[this.pos] += 1;
            prop.push(0);
          } else {
            prop.push(1);
            this.pos = j;
          }
        }
        this.spanColArrs.push(spanArr)
        spanArr = []
      }
    },
    // 3 返回合并数
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex >= 0) {
          const _row = this.spanRowArrs[columnIndex][rowIndex];
          const _col = this.spanColArrs[rowIndex][columnIndex];
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    }
  }
};
</script>