如何设置复选框点击的函数调用条件？解决total重复计算问题

我明白你的问题了：每次重复切换同一个Bill复选框（选中→取消→再选中），total都会被重复计算，导致数值不断上涨，而你希望每个Bill项只在首次被选中时把对应数值加到total里，后续不管怎么切换，total都保持首次选中后的总和不变。

下面是具体的解决方案，分步骤来实现：

1. 新增状态记录已计算的Bill项 #

首先，我们需要一个“标记本”，用来记录哪些Bill项已经被算过total了。用Set来存储这些项的唯一标识（比如每行的ID）是最合适的，因为它自动去重，判断是否存在的效率很高。

在你的组件数据里加上这个集合：

data() {
  return {
    totale: 0,
    total: 0,
    ratio: 0,
    calculatedBillIds: new Set(), // 存储已经累加过total的行ID
    // 你的表格数据，记得给每行加唯一id
    tableData: [
      { id: 1, NoBill: false, Bill: false, amount: 10 },
      { id: 2, NoBill: false, Bill: false, amount: 100 },
      // ...其他行数据
    ]
  }
}

2. 修改Bill复选框的点击逻辑 #

接下来，修改处理Bill复选框切换的方法，核心逻辑是：只有当复选框被选中，且这个项还没被标记过的时候，才累加数值到total。

handleBillToggle(item) {
  if (item.Bill) {
    // 复选框被选中时
    if (!this.calculatedBillIds.has(item.id)) {
      // 首次选中，累加对应金额到total
      this.total += item.amount;
      // 标记这个项已经被计算过
      this.calculatedBillIds.add(item.id);
    }
  } else {
    // 这里是复选框被取消选中的逻辑，如果你希望取消时不减少total，就留空；
    // 如果需要取消时减去对应金额，就加上下面的代码：
    // if (this.calculatedBillIds.has(item.id)) {
    //   this.total -= item.amount;
    //   this.calculatedBillIds.delete(item.id);
    // }
  }
  // 重新计算Ratio，避免除以0的情况
  this.ratio = this.totale !== 0 ? (this.total / this.totale) : 0;
}

3. 保持NoBill的逻辑不变（如果当前没问题的话） #

NoBill的点击逻辑可以继续保持原来的样子，因为你没提到这里有问题：

handleNoBillToggle(item) {
  if (item.NoBill) {
    this.totale += item.amount;
  } else {
    this.totale -= item.amount;
  }
  // 同步更新Ratio
  this.ratio = this.totale !== 0 ? (this.total / this.totale) : 0;
}

4. 控制Ratio和Revasst列的显示 #

你可以通过v-if来控制这两列的显示，比如当有Bill项被选中（total>0）时才显示：

<el-table-column label="Ratio" v-if="total > 0">
  <template slot-scope="scope">{{ ratio.toFixed(2) }}</template>
</el-table-column>
<el-table-column label="Revasst" v-if="total > 0">
  <!-- 这里根据你的业务逻辑渲染Revasst的值 -->
</el-table-column>

为什么这个方案有效？ #

• 用Set记录已计算的项ID，确保每个Bill项只会被累加一次，不管你重复点击多少次复选框，只要已经标记过，就不会再触发累加操作。
• 逻辑清晰，只在首次选中时修改total，完美匹配你“total保持首次选中后的值不变”的需求。
• 如果你之后需要调整取消选中时的逻辑（比如减去金额），只需要在else分支里添加对应的代码即可，扩展性很强。

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