1.将列表进行合计操作
<el-table id="editAbleTrends" :data="tableData" ref="tableData" height="500" style="width: 100%;" :header-cell-style="{background:'rgb(242, 242, 242)'}" center border highlight-current-row show-summary :summary-method="getSummaries" >
<el-table-column type="index" label="序号" width="50">
</el-table-column>
<el-table-column prop="date1" label="名字" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column prop="date2" label="年龄" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column prop="address" label="分数" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column prop="name1" label="性别" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column prop="name2" label="年级" :show-overflow-tooltip="true">
</el-table>
tableData:[
{date1:1,address:"-"},
{date1:1,address:10},
{date1:1,address:10},
{date1:1,address:10},
{date1:1,address:10},
{date1:1,address:10},
{date1:1,address:10},
{date1:1,address:10},
{date1:1,address:10},
{date1:1,address:10},
],
methods: {
// 自定义合计规则
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计';
return;
}
console.log('index',index);
const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return (Number(prev) + Number(curr) ).toFixed(2);
} else {
return Number(prev).toFixed(2);
}
}, 0);
sums[index] += '';
} else {
sums[index] = '';
}
});
return sums;
},
},
2.进行合计行-------合并
// 监控data中的数据变化
watch: {
tableDataList:{
immediate:true,
async handler(){
//await this.$nextTick(); 根据实际选择延迟调用
await this.$nextTick();
const tables = document.querySelectorAll('#editAbleTrends .el-table__footer-wrapper tr>td');
console.log('tables',tables);
tables[0].colSpan=3;
tables[0].style.textAlign='center'
tables[1].style.display='none'
tables[2].style.display='none'
tables[3].colSpan=3;
tables[3].style.textAlign='center'
tables[4].style.display='none'
tables[5].style.display='none'
}
}
},