vue element-ui el-table組件自定義合計(summary-method)的坑

更新時間：2023年02月12日 14:03:15 作者：wo_dxj

這篇文章主要介紹了vue element-ui el-table組件自定義合計(summary-method)的坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

element-ui el-table組件自定義合計(summary-method)坑

項目需要用到表格，帶有合計功能的，照搬的element-ui的table組件，但是合計就是不出來

因為表格是客操作的，所以都是用的自定義內容

自定義的方法也是官方的

后面找問題發(fā)現，紅框圈住的地方一直是undefined,才發(fā)應過來，在表格上應該需要寫 prop的，完了寫了

改成這樣，每一列需要計算的都加了，就ok了

希望對遇到問題的童鞋一個幫助！

element-ui中的el-table組件時，自定義合并表頭和合并行

在使用element-ui中的el-table組件時，怎么自定義合并表頭和合并行

1、合并相同數據的行

效果圖如下，合并相同名稱的行

代碼如下：

data(){
		return{
			tableData1:[{a:6},{a:12},{a:7},{b:6},{b:7},{c:44}]
		}
}

在el-table頭中加入:span-method=“arraySpanMethod”，span-method：合并行或列的計算方法

// 合并列篩選
    flitterData (arr) {
      let spanOneArr = []
      let concatOne = 0
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          if (item && arr[index - 1] && item.a === arr[index - 1].a) { // 第一列需合并相同內容的判斷條件
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
        }
      });
      return {
        one: spanOneArr
      }
    },
    // 合并相同列
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        let data = [];
        data = this.tableData1;
        const _row = (this.flitterData(data).one)[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },

2、自定義合并表頭

table自帶合并屬性：rowSpan和colSpan，所以合并表頭的思路是：獲取所有的表頭單元格，針對性的對需要合并的單元格進行操作。

類似下面這種表頭的合并

比如我們想要合并的是第n列和第n+1列，那么我們先獲取到所有的表頭，然后將第n列表頭的colSpsn設為2，將第n+1列表頭的display設為none。

備注：

el-table__header：是你table的class名，自定義，也可以使用vue中的ref去定義，然后使用this.$refs.xxx去拿到
.rows[0]是拿到table的第一行（rows行）
cells：中文的意思是:單元格。就是我們獲取一行（rows）后,這一行中有多少單元格，一行中所有的單元格集合，可以理解cells為這個行的第幾列
colSpan：跨多少列（單元格自帶的屬性）
display：none可以隱藏某個元素，且隱藏的元素不會占用任何空間。該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。

methods: {
? ? setColSpan:function() {
? ? ? //this.$refs.el-table__header
? ? ? // console.log(document.getElementsByClassName("el-table__header"))
? ? ? // 獲取表頭的所有單元格
? ? ? let n = document.getElementsByClassName("el-table__header")[0].rows[0].cells
? ? ? // 將第二列表頭單元格的colSpan設為2
? ? ? n[1].colSpan = 2
? ? ? // 將第三列表頭單元格的display設為none
? ? ? n[2].style.display = 'none'
? ? },
},


mounted() {
? ? // 注意一定要保證DOM渲染完成后在進行合并操作，否則會找不到元素
? ? this.$nextTick(function(){
? ? ? this.setColSpan();
? ? })
}