el-table vue3统计计算数字

固定合计在最下列

父组件

<template><el-tablev-loading="loading"tooltip-effect="light":data="list"style="width: 100%":max-height="maxHeight"element-loading-text="拼命加载中...":header-cell-style="{backgroundColor: '#d3d7e3',color: '#303030',}"><!-- 此处省略 --></el-table><!-- 合计固定最下面 --><div v-if="sum.length !== 0" style="height: calc(100vh - 320px); padding-top: 11px"><tables :sum="sum"></tables></div>
</template>
<script lang="ts" setup>
const sum = ref<any>([])
const list = ref<any>([])
const loading = ref(false)
onMounted(() => {createdTable()
})
const createdTable = () => {sum.value = []loading.value = truelist.value = [{num1: 0,num2: 0,id: '001',num3: 0,num4: 0,num5: 0,num6: 0,nonum6: 2,name: 'y杨妮',num7: 0,num8: 2,taskObjectivesLoading: false,},{num1: 0,num2: 0,id: '002',num3: 0,num4: 0,num5: 0,num6: 0,nonum6: 1,name: '乌鸦你',num7: 0,num8: 1,taskObjectivesLoading: false,},{num1: 1,num2: 0,id: '00G01',num3: 0,num4: 0,num5: 0,num6: 0,nonum6: 1,name: '菜百',num7: 0,num8: 1,taskObjectivesLoading: false,},]if (list.value.length !== 0) {const sums = reactive({num8: 0,num6: 0,nonum6: 0,num1: 0,num4: 0,num2: 0,num3: 0,num7: 0,num5: 0,name: '合计',})list.value.forEach((item: any) => {sums.num8 += item.num8sums.num6 += item.num6sums.nonum6 += item.nonum6sums.num1 += item.num1sums.num4 += item.num4sums.num2 += item.num2sums.num3 += item.num3sums.num7 += item.num7sums.num5 += item.num5})sum.value = [sums]}loading.value = false
}
</script>

子组件

<template><el-tabletooltip-effect="light":data="props.sum"style="width: 100%":show-header="false":row-style="getRowStyle":highlight-current-row="false"class="table-style"><!-- 此处省略 --></el-table>
</template>
<script lang="ts" setup>
const props = defineProps({sum: {type: Array,},
})
const getRowStyle = (row: any) => {const v = rowif (v.rowIndex === 0) {return {backgroundColor: '#f5f7fa',}}
}
</script>
<style scoped>
.el-table tr {background: #d3d7e3 !important;
}
::v-deep .el-table__row:hover {background: rgba(14, 95, 255, 0.5) !important;
}::v-deep.el-table .el-table__row:hover {background-color: inherit !important;
}
.table-color .el-table__body .el-table__row.hover-row td {background-color: #eec591 !important;
}
</style>

数据

const ui = [{num1: 0,num2: 0,id: '001',num3: 0,num4: 0,num9: 0,num6: 0,nonum6: 2,name: '兔鳄',num7: 0,num10: 2,taskObjectivesLoading: false,},{num1: 0,num2: 0,id: '002',num3: 0,num4: 0,num9: 0,num6: 0,nonum6: 1,name: '以恶',num7: 0,num10: 1,taskObjectivesLoading: false,},{num1: 1,num2: 0,id: '00G01',num3: 0,num4: 0,num9: 0,num6: 0,nonum6: 1,name: '后世',num7: 0,num10: 1,taskObjectivesLoading: false,},
]
计算num10，num6，nonum6，num1，num4，num2，num3，num7，num9// 初始化总和对象
const sums = {num10: 0,num6: 0,nonum6: 0,num1: 0,num4: 0,num2: 0,num3: 0,num7: 0,num9: 0,
};// 遍历数组并累加每个字段的值
ui.forEach(item => {sums.num10 += item.num10;sums.num6 += item.num6;sums.nonum6 += item.nonum6;sums.num1 += item.num1;sums.num4 += item.num4;sums.num2 += item.num2;sums.num3 += item.num3;sums.num7 += item.num7;sums.num9 += item.num9;
});// 输出总和
console.log(sums);