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

需求: 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組件合計行的某些單元格加上事件或者樣式,  若是有其餘更簡便的方法, 歡迎交流~