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

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

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

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

解决思路：

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

HTML

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

转载于:https://www.cnblogs.com/lisaShare/p/10885133.html