el-table vue3统计计算数字

固定合计在最下列

父组件

<template>
  <el-table
    v-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 = true
  list.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.num8
      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.num5 += item.num5
    })

    sum.value = [sums]
  }
  loading.value = false
}
</script>

子组件

<template>
  <el-table
    tooltip-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 = row
  if (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);