Alpine JS实现x-for遍历项求和及判断最后一行输出总计的方法

解法说明 #

问题1：遍历x-for所有项求和输出总计 #

直接在Alpine.js的x-data中定义计算属性实时求和，推荐把总计放在你提到的template外部位置，不需要额外判断逻辑，实现更简单：

1. 给x-data添加总和计算逻辑：

x-data = {
  catalogxbdatax: [/* 你的源数据 */],
  // 新增计算属性自动求和
  get totalPrice() {
    return this.catalogxbdatax.reduce((sum, item) => sum + Number(item.Price || 0), 0)
  }
}

2. 模板外部位置直接调用即可：

<div class="table-cell" x-text="totalPrice"></div>

问题2：源数据预存总计，判断当前遍历项为最后一行 #

x-for支持同时获取遍历项和索引，通过索引和数组长度对比即可判断是否为最后一项：

1. 修改x-for声明，新增索引变量：

<template x-for="(catalogxbdata, index) in catalogxbdatax" :key="catalogxbdata.Part">

2. 给需要仅在最后一行显示的单元格添加x-if判断，直接读取预存的总计字段即可：

<div class="table-cell" 
  x-if="index === catalogxbdatax.length - 1" 
  x-text="catalogxbdata.你的预存总计字段名">
</div>

完整代码参考 #

<!-- 前端计算总和版本 -->
<div x-data="{
  catalogxbdatax: [
    {Part: 'A', Price: 100},
    {Part: 'B', Price: 200},
    {Part: 'C', Price: 300}
  ],
  get totalPrice() {
    return this.catalogxbdatax.reduce((sum, item) => sum + Number(item.Price || 0), 0)
  }
}">
  <template x-for="catalogxbdata in catalogxbdatax" :key="catalogxbdata.Part">
    <div class="table-row">
      <div class="table-cell" x-text="catalogxbdata.Part"></div>
      <div class="table-cell" x-text="catalogxbdata.Price"></div>    
      <div class="table-cell"></div>
    </div>
  </template>
  <div class="table-row">
    <div class="table-cell">总计</div>
    <div class="table-cell" x-text="totalPrice"></div>
  </div>
</div>

<!-- 源数据带总计版本 -->
<div x-data="{
  catalogxbdatax: [
    {Part: 'A', Price: 100},
    {Part: 'B', Price: 200},
    {Part: 'C', Price: 300},
    {Part: 'total', Price: 0, totalVal: 600} // 预存总计的最后一项
  ]
}">
  <template x-for="(catalogxbdata, index) in catalogxbdatax" :key="catalogxbdata.Part">
    <div class="table-row">
      <div class="table-cell" x-text="catalogxbdata.Part"></div>
      <div class="table-cell" x-text="catalogxbdata.Price"></div>    
      <div class="table-cell" 
        x-if="index === catalogxbdatax.length - 1"
        x-text="catalogxbdata.totalVal">
      </div>
    </div>
  </template>
</div>

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