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组件合计行的某些单元格加上事件或者样式,  若是有其余更简便的方法, 欢迎交流~