UI组件--element-ui--Table组件自定义合计行

时间:2022-04-24 09:01:42

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