Vue -- element-ui el-table 的合计在第一行显示并可点击

使用element-ui el-table 中有这样一个需求，须要将合计放在表格内容的第一行，而且点击合计可跳转到其它页面！

框架中提供了合计的属性方法，这样能够进行数值求和及自定义求和，可是，合计那一栏不能添加点击跳转功能，结构默认排到最底行，不知足需求

经过给table传入span-method方法能够实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数能够返回一个包含两个元素的数组，第一个元素表明rowspan，第二个元素表明colspan。 也能够返回一个键名为rowspan和colspan的对象。

解决思路：

1. 调节样式；
2. 将合计的数据单独计算出来/接口返回，添加到数组第一个位置，这样就能够很好的控制合计这一行了。

HTML

<el-table ref="tableData" tooltip-effect="dark" style="width: 100%" border :data="tableData" v-loading="loading" :span-method="arraySpanMethod">
    <el-table-column type="index" label="序号" align="center" width="55" :index="indexFun"></el-table-column>
    <el-table-column
       prop="name"
       align="center"
       label="姓名">
       <template slot-scope="scope">
           <el-button type="text" size="small" @click="goLink(scope.row)">{{scope.row.name}}</el-button>
      </template>
    </el-table-column>
</el-table>

JS

// 插入合计的数据
summaryFun(){ 
    var obj = [“合计”，......]；
    this.tableData.unshift(obj);
},
 // 合并合计第一行
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                 if (columnIndex === 0) {
                     return [0, 0];
              } else if (columnIndex === 1) {
                     return [1, 2];
            }
       }
},
// 表格序号 除去合计从第一开始，以下图
indexFun (index) { 
      return index;
},
// 点击合计进行跳转
goLink(row){
    if(row.id == "合计"){window.loaction.href=""}
}

合计三行合并并可点击

arraySpanMethod({ row, column, rowIndex, columnIndex }) { // 合并第一行
     if (rowIndex === 0) {
          if (columnIndex === 0) {
                 return [0, 0];
           } else if (columnIndex === 1) {
                 return [1, 3];
           } else if (columnIndex === 2) {
                 return [0, 0];
           } 
     }
},

合并第一行四列 取 第三个值（写了这么多案例，能看出合并的方法了吧）

arraySpanMethod({ row, column, rowIndex, columnIndex }) { // 合并第一行
                // if (rowIndex === 0) {
                //     if (columnIndex === 0) {
                //         return [0, 0];
                //     } else if (columnIndex === 1) {
                //         return [0, 0];
                //     }else if (columnIndex === 2) {
                //         return [1, 3];
                //     }
                // }
      if (rowIndex === 0) {
           if (columnIndex === 0) {
                   return [0, 0];
           } else if (columnIndex === 1) {
                  return [0, 0];
           }else if (columnIndex === 2) {
                  return [1, 4];
           }else if (columnIndex === 3) {
                 return [0, 0];
           }
      }
},