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];
           }
      }
},