Question

我有一个HTML表。我想做的是将相同的行数据分组，并添加其数量和console.log，

这是我的HTML表格的静态代码

new Vue({
  el: "#app",
  computed: {
    gst28() {
      return 105 // here I want to calculate I dont know how to calculate
    },
    gst18() {
      return 65
    }
  }
})

<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
<div id="app">
  <table style="width:100%">
    <tr>
      <th>Item Code</th>
      <th>Item Name</th>
      <th>GST</th>
      <td>Amount</td>
    </tr>
    <tr>
      <td>1001</td>
      <td>Item1</td>
      <td>GST28</td>
      <td class="test">45</td>
    </tr>
    <tr>
      <td>1002</td>
      <td>item2</td>
      <td>GST18</td>
      <td>40</td>
    </tr>
    <tr>
      <td>1003</td>
      <td>item3</td>
      <td>GST28</td>
      <td class="28">60</td>
    </tr>
    <tr>
      <td>1004</td>
      <td>item4</td>
      <td>GST18</td>
      <td>25</td>
    </tr>
  </table>

  <h4>GST28-{{gst28}}</h4>
  <h4>GST18-{{gst18}}</h4>
</div>

在这里，我的代码GST28和GST18是可以分组的两件事，表中有4行，因为有四个不同的项目，但是我想根据GST打印组（总和），所以我将这个表与每行动态创建的数据并具有一些输入字段。

Answer 1

您的问题不清楚。您是说您的数据是动态的，但我们看到了一个硬编码的示例和计算值。我建议使用下一个结构：

new Vue({
  el: "#app",
  data:{
    headFields: ["Item Code", "Item Name", "GST", "Amount"],
    items: [
      {code: "1001", name: "Item1", gst: "GST28", amount: 45},
      {code: "1002", name: "Item2", gst: "GST18", amount: 40},
      {code: "1003", name: "Item3", gst: "GST28", amount: 60},
      {code: "1004", name: "Item4", gst: "GST18", amount: 25},
    ]   
  },
  methods: {
    getTotalAmount(gst) {
      return this.items.reduce((acc,cur) => {
        acc+= cur.gst === gst ? cur.amount : 0;
        return acc;
      }, 0)      
    }
  },
  computed: {
    gsts() {
      return [...new Set(this.items.map(item => item.gst))];
    }
  }
})

th, td {
  border: 1px solid black;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <table bordered>
    <thead>
      <tr class="header">
        <th v-for="field in headFields"> {{field}} </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items">
        <td>{{item.code}}</td>
        <td>{{item.name}}</td>
        <td>{{item.gst}}</td>
        <td class="test">{{item.amount}}</td>
      </tr>
    </tbody>
  </table>
  <h4 v-for="gst in gsts">{{gst}} - {{getTotalAmount(gst)}}</h4>
</div>

items可以动态更改。因此，最初它可以是一个空数组。但是我的观点是要展示如何正确地计算和使用vue中的数据。

如何对HTML表格行进行分组

1 个答案: