VS code中用Vue框架生成表格且使用methods进行对表格运算

可以参考下面的代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>名称</th>
          <th>数量</th>
          <th>单价</th>
          <th>总价</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in itemList" :key="index">
          <td>{{ index + 1 }}</td>
          <td>{{ item.name }}</td>
          <td>
            <input v-model="item.quantity" @input="calculateTotal" />
          </td>
          <td>
            <input v-model="item.price" @input="calculateTotal" />
          </td>
          <td>{{ item.total }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      itemList: [
        { name: '物品1', quantity: 5, price: 10, total: 0 },
        { name: '物品2', quantity: 3, price: 20, total: 0 },
        { name: '物品3', quantity: 2, price: 30, total: 0 }
      ]
    }
  },
  methods: {
    calculateTotal() {
      for (let item of this.itemList) {
        item.total = item.quantity * item.price
      }
    }
  },
  mounted() {
    this.calculateTotal()
  }
}
</script>

在上面的代码中，我们在表格中添加了两个输入框，用于编辑每个物品的数量和单价。在每个输入框中，我们使用`v-model`指令将输入框的值与`item.quantity`和`item.price`绑定。当输入框的值发生变化时，会触发`@input`事件，我们在这个事件中调用`calculateTotal`方法重新计算每个物品的总价。在`calculateTotal`方法中，我们遍历`itemList`数组，计算每个物品的总价，并将结果保存到`item.total`中。在mounted钩子函数中，我们调用`calculateTotal`方法以便在页面渲染完成后计算每个物品的总价。