Vue3组件中如何根据Debit/Credit状态计算总金额与余额

我在Vue项目里开发现金付款凭证页面，表格包含Amount列，需要根据每行的**借方（Debit）/贷方（Credit）**下拉选择，自动统计总借方金额、总贷方金额，并计算剩余余额。规则如下：

• 选择Debit（借方）时，剩余余额 = 初始Amount - 当前行金额
• 选择Credit（贷方）时，剩余余额 = 初始Amount + 当前行金额

以下是我的Vue代码：

<script>
import Breadcrumb from "primevue/breadcrumb";
import Button from "primevue/button";
import InputText from "primevue/inputtext";
import Calendar from "primevue/calendar";
import Dropdown from "primevue/dropdown";
import InputNumber from "primevue/inputnumber";
import { ref, reactive } from "vue";
import { computed } from "@vue/reactivity";

export default {
  name: "CashPayementVoucher",
  components: {
    Button,
    InputText,
    Calendar,
    Dropdown,
    InputNumber,
    Breadcrumb,
  },
  setup() {
    const home = ref({ icon: "pi pi-home", to: "/" });
    const items = ref([
      { label: "Vouchers" },
      { label: "Cash Payement Voucher" },
    ]);
    const accountsData = ref([
      { name: "0987-12345678-1", value: "0987-12345678-1" },
      { name: "0987-12345678-2", value: "0987-12345678-2" },
      { name: "0987-12345678-3", value: "0987-12345678-3" },
      { name: "0987-12345678-4", value: "0987-12345678-4" },
      { name: "0987-12345678-5", value: "0987-12345678-5" },
    ]);
    const projectsData = ref([
      { name: "Blue World City", value: "Blue World City" },
      { name: "Estate 92", value: "Estate 92" },
      { name: "Atlantics City", value: "Atlantics City" },
      { name: "Park View City", value: "Park View City" },
      { name: "Bahria Town", value: "Bahria Town" },
    ]);
    const usersData = ref([
      { name: "Ali Suleman", value: "Ali Suleman" },
      { name: "Muhammad Khan", value: "Muhammad Khan" },
      { name: "Sheraz Ahemad", value: "Sheraz Ahemad" },
      { name: "Mehbob Sultan", value: "Mehboob Sultan" },
      { name: "Usama Javeed", value: "Usama javeed" },
      { name: "Shoaib Khan", value: "Shoaib Khang" },
    ]);
    const payementType = ref([
      { name: "Debit", value: 1 },
      { name: "Credit", value: 0 },
    ]);
    const invoice = reactive({
      account: "",
      date: "",
      projects: "",
      payeeName: "",
      amount: 0,
      details: [
        {
          account: "",
          name: "",
          description: "",
          debit_credit: 1,
          amount: 0,
        },
      ],
      totalCredit: 0,
      totalDebit: 0,
      difference: 0,
    });
    const addnewRow = () => {
      invoice.details.push({
        account: "",
        name: "",
        description: "",
        debit_credit: "",
        amount: 0,
      });
    };
    const removeRow = (index) => {
      invoice.details.splice(index, 1);
    };
    const postData = () => {
      console.log("Hello I'm Here 'Cash Payement Voucher'", invoice);
    };
    
    const remaining =computed(() => {
      return (
        invoice.amount +
        invoice.details.reduce(function (prevTotal, detail) {
          let temp = detail.debit_credit > 0 ? detail.amount * -1 : detail.amount * 1;
          return +prevTotal + temp;
        }, 0)
      );
    });

    return {
      home,
      items,
      accountsData,
      projectsData,
      usersData,
      payementType,
      invoice,
      addnewRow,
      removeRow,
      postData,
      remaining
    };
  },
};
</script>

页面效果截图：

解决方案 #

修改后的关键代码：

// 新增计算总借方金额
const totalDebit = computed(() => {
  return invoice.details.reduce((sum, item) => {
    return item.debit_credit === 1 ? sum + Number(item.amount) : sum;
  }, 0);
});

// 新增计算总贷方金额
const totalCredit = computed(() => {
  return invoice.details.reduce((sum, item) => {
    return item.debit_credit === 0 ? sum + Number(item.amount) : sum;
  }, 0);
});

// 修正剩余余额计算逻辑，匹配需求规则
const remaining = computed(() => {
  return invoice.amount - totalDebit.value + totalCredit.value;
});

// 修复新增行默认值，避免debit_credit为空导致计算异常
const addnewRow = () => {
  invoice.details.push({
    account: "",
    name: "",
    description: "",
    debit_credit: 1, // 默认设为借方，可根据需求调整
    amount: 0,
  });
};

修改说明：

1. 总借方/贷方统计：通过computed监听invoice.details的变化，实时累加对应类型的金额
2. 剩余余额计算：直接用初始金额减去总借方、加上总贷方，完全匹配需求规则，逻辑更清晰
3. 新增行默认值：把debit_credit默认设为1（借方），避免空值导致计算错误
4. 在return对象中添加totalDebit和totalCredit，方便模板中调用显示

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