Vue.js+Laravel实现报表Grand Total列总和计算方案

前端Vue实现（推荐方式） #

利用Vue的计算属性实现响应式的总和计算，自动随数据更新而变化。

1. 添加计算属性

在你的Vue组件中，新增一个计算属性处理总和逻辑，根据后端返回的Grand Total格式选择对应处理方式：

<script>
export default {
  data() {
    return {
      tableData: [], // 存储加载的数据
      // 其他筛选器数据：startDate、endDate、selectedBranch、selectedSpares等
    };
  },
  // ... 现有方法（loadData、fetchFilters等）
  computed: {
    grandTotalSum() {
      // 情况1：后端返回的Grand Total是带格式的字符串（如"1,000"、"$1,000"）
      return this.tableData.reduce((total, item) => {
        // 清理字符串中的非数字字符，转成数字
        const cleanValue = item['Grand Total'].replace(/[^0-9.-]/g, '');
        const num = parseFloat(cleanValue);
        // 避免NaN影响总和
        return total + (isNaN(num) ? 0 : num);
      }, 0);

      // 情况2：后端返回的是纯数字（如字段为grand_total）
      // return this.tableData.reduce((total, item) => total + (item.grand_total || 0), 0);
    }
  }
};
</script>

2. 在模板中展示总和

在表格底部添加合计行，显示计算出的总和：

<template>
  <!-- 现有筛选器区域 -->
  <table>
    <thead>
      <tr>
        <th>分支名称</th>
        <th>Grand Total</th>
        <!-- 其他表头字段 -->
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in tableData" :key="item.id">
        <td>{{ item.branch_name }}</td>
        <td>{{ item['Grand Total'] }}</td>
        <!-- 其他数据列 -->
      </tr>
    </tbody>
    <!-- 合计行 -->
    <tfoot>
      <tr>
        <td><strong>总合计</strong></td>
        <td><strong>{{ grandTotalSum.toLocaleString() }}</strong></td>
        <!-- 其他列留空或对应处理 -->
      </tr>
    </tfoot>
  </table>
</template>

后端Laravel配合（可选） #

如果希望后端直接计算总和并返回，可修改控制器代码，在返回数据时附带总和：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\SpareReport;

class SpareReportController extends Controller
{
    public function loadData(Request $request)
    {
        $query = SpareReport::query();

        // 应用筛选条件
        if ($request->filled('start_date')) $query->where('date', '>=', $request->start_date);
        if ($request->filled('end_date')) $query->where('date', '<=', $request->end_date);
        if ($request->filled('branch_id')) $query->where('branch_id', $request->branch_id);
        if ($request->filled('spare_id')) $query->where('spare_id', $request->spare_id);

        $data = $query->select('branch_name', \DB::raw('SUM(total) as grand_total'))
            ->groupBy('branch_name')
            ->get()
            ->map(function ($item) {
                // 格式化前端显示的Grand Total
                $item['Grand Total'] = number_format($item->grand_total);
                return $item;
            });

        // 计算所有数据的Grand Total总和
        $totalSum = $data->sum('grand_total');

        return response()->json([
            'data' => $data,
            'total_sum' => $totalSum
        ]);
    }
}

此时前端只需在loadData方法中接收总和：

async loadData() {
  try {
    const response = await axios.get('/api/load-data', {
      params: {
        start_date: this.startDate,
        end_date: this.endDate,
        branch_id: this.selectedBranch,
        spare_id: this.selectedSpares
      }
    });
    this.tableData = response.data.data;
    this.totalSum = response.data.total_sum; // 直接使用后端计算的总和
  } catch (error) {
    console.error('加载数据失败:', error);
  }
}

效果说明 #

当加载10条每条Grand Total为1000的数据时，合计行将显示10,000（通过toLocaleString()格式化千分位）。

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