需求: Element-ui的Table組件自帶合計行, 但是需求需要在合計行的某些單元格有特別的樣式以及事件, 沒有研究出怎麽在既有合計行上完成此需求, 於是利用其原本的一些屬性完成自定義合計行.

分析: 在Table組件中是有columns(包含所有列的數據的數組)的, 但是只有在summary-method事件中才暴露出來, 用來自定義合計行, 可以利用此事件來獲得columns, 但是又不想顯示自帶的合計行, 就可以這樣:

<template>
    <el-table
      @row-click="rowClick"
      @cell-click="singleClick"
      :row
 
-class-name="setSumRowStyle"
      :data="tableData"
      stripe
      show-summary
      :summary-method="getColumns"
      style="width: 100%"
      >
    </el-table>
</template>

    // 獲取columns
    getColumns(param) {
      const { columns } = param;
      this.columns = columns;
      
 
return []
    },

    // 計算合計行
    getSummaries (data) {
      let Obj = {};
      Obj.type = ‘sum‘;
      let lastData = this.levelList[this.levelList.length - 1];this.columns.forEach((column, index) => {
        if (index === 0) {
          Obj[column.property] = ‘全部‘;
          return;
        }
        
 
if (index === 1) {
          Obj[column.property] = "上一層公司名???";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          Obj[column.property] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
        }  else {
          Obj[column.property] = ‘--‘;
        }
      })
      return Obj;  
    },

    // 將合計行數據添加到已有的列表數據的最後一項, 如果是異步, 請在請求到列表數據並且視圖更新後再調用合計行方法
    getNewTableData (row) { 
      api.getList(this.checkForm).then(res => {
        console.log(res);
        if (res.status === 0 && res.result.record.length > 0) {this.columns = [];
          let newData = res.result.record;
          this.tableData = newData;
          this.total = res.result.totalCount;
          // 視圖更新後再求和
          this.$nextTick(() => {
            let summaries = this.getSummaries(newData);
            this.tableData.push(summaries);
          })
        }
      })
    },

以上步驟已經自定義完成, 但是這些是Table組件自帶求和可以完成的, 我們辛苦的自定義合計主要是為了擴展事件以及樣式, 此時, 只需在table表格中判斷一下就可以用了:

樣式:

// text_bule_underline是樣式名稱
　　<el-table
      @row-click="rowClick"
      @cell-click="singleClick"
      :row-class-name="setSumRowStyle"
      :data="tableData"
      stripe
      show-summary
      :summary-method="getColumns"
      style="width: 100%"
      >
      <el-table-column
        prop="name"
        width="160px"
        label="姓名">
        <template slot-scope="scope">
          <span :class="(scope.row.type && scope.row.type == ‘sum‘) ? ‘text_bule_underline‘: ‘‘">{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="age"
        min-width="180px"
        label="年齡">
        <template slot-scope="scope">
          <span :class="(scope.row.type && scope.row.type == ‘sum‘) ? ‘text_bule_underline‘: ‘‘">{{scope.row.age}}</span>
        </template>
      </el-table-column>
　　</el-table>

事件: 可以在 @row-click="rowClick" 或者 @cell-click="singleClick" 裏面判斷觸發.

    // 點擊行
    rowClick (row, event, column) {
      if (column.label==‘查看‘|| (row.type && row.type=="sum")) {
        return
      }
      this.getInfo();
    },
    // 點擊單元格
    singleClick(row, column, cell, event) {
      if (column.label==‘查看‘) {
        this.getDetailList();
      }
    },

目前除了以上這種我還沒有找到更好的方法為Table組件合計行的某些單元格加上事件或者樣式, 如果有其他更簡便的方法, 歡迎交流~

UI組件--element-ui--Table組件自定義合計行