表格中自定义同时实现合并行,合并列

@收入支出统计表

关于同一表格中实现合并行列实现统计表的浅见

首先需求是这样的图

[收入支出统计图

](https://img-blog.csdnimg.cn/20190605174523100.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE0ODczNw==,size_16,color_FFFFFF,t_70)
首先这是基于elementui的合并方法

//table设置:
<el-table
        :data="tableDataYear"
        :span-method="arraySpanMethod"
        border
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="account" label="账户">
          <template slot-scope="scope">
            <a
              v-if="scope.row.authorize"
              @click="detailQuery(scope.row.from)"
              href="javascript:;"
            >{{scope.row.account}}</a>
            <span v-else>{{scope.row.account}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="身份证号"></el-table-column>
        <el-table-column prop="from" label="数据来源"></el-table-column>
        <el-table-column prop="type" label="金额类型"></el-table-column>
        <el-table-column prop="month1" label="2018-05"></el-table-column>
        <el-table-column prop="month2" label="2018-06"></el-table-column>
        <el-table-column prop="month3" label="2018-07"></el-table-column>
        <el-table-column prop="month4" label="2018-08"></el-table-column>
        <el-table-column prop="month5" label="2018-09"></el-table-column>
        <el-table-column prop="month6" label="2018-10"></el-table-column>
        <el-table-column prop="month7" label="2018-11"></el-table-column>
        <el-table-column prop="month8" label="2018-12"></el-table-column>
        <el-table-column prop="month9" label="2019-01"></el-table-column>
        <el-table-column prop="month10" label="2019-02"></el-table-column>
        <el-table-column prop="month11" label="2019-03"></el-table-column>
        <el-table-column prop="month12" label="2019-04"></el-table-column>
        <el-table-column prop="sum" label="合计"></el-table-column>
        <el-table-column prop="average" label="平均"></el-table-column>
    </el-table>

具体的数据就不展示了
下面直接展示方法

// 合并行列
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
    //首先判断需要合并列的行数,这里最后两行需要合并
      if (
        rowIndex === this.tableDataYear.length - 1 ||
        rowIndex === this.tableDataYear.length - 2
      ) {
      //合并的那一列的合并行列数,这里是合并行第一列,行数不变,列数合并5列
        if (columnIndex === 0) {
          return {
            rowspan: 1,
            colspan: 5,
          };
        }
         //合并的那一列的合并行列数,这里是合并行第2345列也要做处理,需要把这几列移除,否则会造成数据混乱
        if (
          columnIndex === 1 ||
          columnIndex === 2 ||
          columnIndex === 3 ||
          columnIndex === 4
        ) {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      //  然后需要实现合并行了,前面判断的是行数,这里在行数的基础上判断列数,前四列合并行
      } else if (
        columnIndex === 0 ||
        columnIndex === 1 ||
        columnIndex === 2 ||
        columnIndex === 3
      ) {
      //当行索引为偶数时合并2行
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        }
       // 处理合并行列数问题
        return {
          rowspan: 0,
          colspan: 0,
        };
      }
    },

这样你就可以直接做到同时合并行列了,希望对你也有一点帮助.