使用elementui的表格中 show-summary没有生效解决方法
如果你需要自定义汇总行的内容,可以使用。
·
<el-table
:key="tableKey"
ref="myTable"
:data="tepowpowyue"
border
height="100%"
show-summary
:summary-method="getSummaries"
style="width: 100%; height: 100%; overflow: auto"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" fixed> </el-table-column>
<el-table-column fixed prop="siteName" label="电站名称" width="120">
<template slot-scope="scope">
<span
style="
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
"
>{{ scope.row.siteName }}</span
>
</template>
</el-table-column>
<el-table-column
v-for="(item, index) in dataList"
:key="index"
:prop="'dataList.' + index + '.dataValue'"
:label="item.timeInterval"
>
<template slot-scope="scope">
{{ scope.row.dataList[index].dataValue }}
</template>
</el-table-column>
</el-table>
<script>
export default {
methods: {
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '总计';
return;
}
const values = data.map(item => Number(item.dataList[index - 1]?.dataValue || 0));
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] += ' ';
} else {
sums[index] = '';
}
});
}
}
</script>
如果你需要自定义汇总行的内容,可以使用 summary-method 属性
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)