需求: 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=" 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=" 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组件合计行的某些单元格加上事件或者样式, 如果有其他更简便的方法, 欢迎交流~