如何对网格记录求和并在表头显示总计，计算体积总和至Total volume字段

1. 网格记录求和并展示在表头区域 #

原生JavaScript实现 #

// 1. 计算网格数据总和
const dataRows = document.querySelectorAll('#your-table-id tbody tr');
let total = 0;

dataRows.forEach(row => {
  // 替换为你要求和的列索引（从0开始）
  const cellValue = parseFloat(row.cells[1].textContent.trim());
  if (!isNaN(cellValue)) total += cellValue;
});

// 2. 将总计插入表头区域（示例：表头最后一个单元格）
const targetHeaderCell = document.querySelector('#your-table-id thead tr th:last-child');
targetHeaderCell.innerHTML = `总计: ${total.toFixed(2)}`;

UI组件（如Element UI）实现 #

<el-table :data="tableData">
  <el-table-column label="目标列">
    <template #header>
      <span>目标列 总计: {{ totalSum }}</span>
    </template>
    <template #default="scope">{{ scope.row.targetValue }}</template>
  </el-table-column>
</el-table>

// Vue计算属性求和
computed: {
  totalSum() {
    return this.tableData.reduce((sum, item) => {
      const val = parseFloat(item.targetValue || 0);
      return sum + (isNaN(val) ? 0 : val);
    }, 0);
  }
}

2. 计算体积总和并展示至Total volume字段 #

原生JavaScript实现 #

// 1. 计算所有体积总和
let totalVolume = 0;
dataRows.forEach(row => {
  // 替换为体积列的索引
  const volumeVal = parseFloat(row.cells[2].textContent.trim());
  if (!isNaN(volumeVal)) totalVolume += volumeVal;
});

// 2. 赋值到Total volume字段
document.querySelector('#total-volume-element').textContent = totalVolume.toFixed(2);

Vue框架实现 #

<!-- 页面中Total volume字段的渲染 -->
<div class="total-volume">Total volume: {{ totalVolume }}</div>

computed: {
  totalVolume() {
    return this.tableData.reduce((sum, item) => {
      const vol = parseFloat(item.volume || 0);
      return sum + (isNaN(vol) ? 0 : vol);
    }, 0);
  }
}

内容的提问来源于stack exchange，提问作者DevFuture