Vue3+Bootstrap5表格实现商品总费用计算、对齐及逗号格式价格保留方案

解决方案 #

1. 价格格式兼容与总金额计算修复 #

新增两个工具方法处理逗号格式的价格：计算前将xx,xx格式的价格转为可运算的数字，计算完成后将结果转回xx,xx格式用于展示。同时删除冗余的importiInseriti数组，直接遍历商品条目计算总金额，逻辑更可靠。

2. 表格对齐优化 #

用Bootstrap内置对齐类统一规则：商品编码、描述类文本列左对齐，数量、税率、价格、总金额这类数值列统一右对齐，表头和对应数据列对齐规则保持一致，表尾总金额仅跨对应列避免错位。

3. 修改后完整代码 #

JS逻辑部分

export default {
  name: 'Home',
  data() {
    return {
      elFattura: [],
      nome: null,
      cognome: null,
      piva: null,
      sdi: null,
      numeroFattura: null,
      dataEmissione: null,
      codiceArticolo: null,
      descArticolo: null,
      qta: null,
      iva: null,
      prezzo: null,
    }
  },
  computed: {
    importoTotale() {
      // 遍历所有商品计算总金额
      const total = this.elFattura.reduce((sum, item) => {
        return sum + this.priceToNumber(item.prezzo)
      }, 0)
      // 转回逗号格式返回
      return this.formatPrice(total)
    }
  },
  methods: {
    // 把逗号格式价格转成数字用于计算
    priceToNumber(priceStr) {
      if (!priceStr) return 0
      return Number(priceStr.replace(',', '.'))
    },
    // 把计算结果转回逗号格式用于展示
    formatPrice(num) {
      return num.toFixed(2).replace('.', ',')
    },
    addItem() {
      this.elFattura.push({
        codiceArticolo: this.codiceArticolo,
        descrizione: this.descArticolo,
        qta: this.qta,
        iva: this.iva,
        // 存储的时候统一转成逗号格式保证展示一致
        prezzo: this.formatPrice(this.priceToNumber(this.prezzo))
      });
      // 清空输入框
      this.codiceArticolo = this.descArticolo = this.qta = this.iva = this.prezzo = null
    },
    removeAmount(index) {
      this.elFattura.splice(index, 1);
    }
  }
}

模板部分

<div class="col-sm-12 col-md-12 col-lg-12">
  <h4 class="text-start">添加商品</h4>
  
  <div class="row">
    <div class="col-sm-12 col-md-3 col-lg-3">
      <div class="form-floating mb-3">
        <input type="text" class="form-control" id="floatingInput" placeholder="" v-model="codiceArticolo">
        <label for="floatingInput">商品编码</label>
      </div>
    </div>
    
    <div class="col-sm-12 col-md-1 col-lg-1">
      <div class="form-floating">
        <input type="text" class="form-control" id="qtaInput" placeholder="" v-model="qta">
        <label for="qtaInput">数量</label>
      </div>
    </div>
    
    <div class="col-sm-12 col-md-4 col-lg-4">
      <div class="form-floating">
        <input type="text" class="form-control" id="descInput" placeholder="Descrizione" v-model="descArticolo">
        <label for="descInput">商品描述</label>
      </div>
    </div>
    
    <div class="col-sm-12 col-md-1 col-lg-1">
      <div class="form-floating">
        <input type="text" class="form-control" id="ivaInput" placeholder="IVA" v-model="iva">
        <label for="ivaInput">税率%</label>
      </div>
    </div>
    
    <div class="col-sm-12 col-md-2 col-lg-2">
      <div class="form-floating">
        <input type="text" class="form-control" id="priceInput" placeholder="Prezzo" v-model="prezzo">
        <label for="priceInput">价格</label>
      </div>
    </div>
    
    <div class="col-sm-12 col-md-1 col-lg-1 d-flex align-items-center mb-3">
      <a class="btn btn-success w-100" href="#" @click.prevent="addItem"><i class="fas fa-plus"></i></a>
    </div>
  </div>
</div>

<div class="col-sm-12 col-md-12 col-lg-12">
  <!-- 发票抬头 -->
  <div class="card text-start">
    <div class="card-body">
      <p class="m-0"><small class="pe-2">公司名称:</small>{{ nome }} {{ cognome }}</p>
      <p class="m-0"><small class="pe-2">增值税号:</small>{{ piva }}</p>
      <p class="m-0"><small class="pe-2">SDI码:</small>{{ sdi }}</p>
      <hr>
      <p class="m-0 d-inline pe-3"><small class="pe-2">发票编号:</small>{{ numeroFattura }}</p>
      <p class="m-0 d-inline ps-2"><small class="pe-2">开票日期:</small>{{ dataEmissione }}</p>

    </div>
  </div>
  
  <table class="table table-responsive align-middle">
    <thead>
      <tr>
        <th scope="col">商品编码</th>
        <th scope="col" class="text-end">数量</th>
        <th scope="col">商品描述</th>
        <th scope="col" class="text-end">税率%</th>
        <th scope="col" class="text-end">价格</th>
        <th scope="col" v-show="elFattura.length > 0" class="text-center">操作</th>
      </tr>
    </thead>
    
    <tbody>
      <tr v-for="(item, index) in elFattura" :key="index">
        <th scope="row">{{ item.codiceArticolo }}</th>
        <td class="text-end">{{ item.qta }}</td>
        <td>{{ item.descrizione }}</td>
        <td class="text-end">{{ item.iva }}</td>
        <td class="text-end">{{ item.prezzo }} €</td>
        <td class="text-center">
          <a class="btn-link text-decoration-none text-danger" href="#" @click.prevent="removeAmount(index)"><i class="fas fa-times"></i></a>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr class="table-secondary">
        <th scope="row" colspan="5" class="text-end">总金额：{{ importoTotale }} €</th>
        <th v-show="elFattura.length > 0"></th>
      </tr>
    </tfoot>
  </table>
</div>

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