vue商单表格，拥有增加商品，删除商品，修改商品的功能，商品获取时间为系统时间，添加商品的id为最后一位+1

Vue 商单表格是一个基于 Vue.js 的前端组件，主要用于展示和管理商城订单中的商品列表。它具备以下几个核心功能：

1. **商品操作**：支持用户添加新的商品、删除已有的商品以及修改商品信息。添加商品通常会有一个“+”按钮，点击后会自动将上一条商品的 id 加 1 作为新商品的 ID。

2. **动态增删**：通过双向数据绑定，用户的操作（如点击删除按钮）会被实时反映到表格的数据中，而添加商品则会更新最后一个商品 ID 的值并动态插入新行。

3. **系统时间显示**：每个商品的获取时间默认显示为系统的当前时间，可以使用 JavaScript 的 Date 对象或者相应的日期插件来获取。

这个组件的设计注重交互性和数据的实时更新，使其在实际商业场景中提高了工作效率。下面是简单示例代码片段（简化版）：

<template>
  <div>
    <table>
      <tr v-for="(item, index) in goods" :key="index">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
        <td>{{ item.time }}</td>
        <td><button @click="removeItem(index)">删除</button></td>
        <td><button @click="editItem(index)">编辑</button></td>
        <td><button @click="addItem()">添加商品</button></td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goods: [], // 初始化空的商品数组
      lastItemId: 0,
    };
  },
  methods: {
    addItem() {
      this.lastItemId += 1;
      const newItem = { id: this.lastItemId, ... /* 其他属性 */ };
      this.goods.push(newItem);
    },
    removeItem(index) {
      this.goods.splice(index, 1);
    },
    editItem(index) {
      // 提供一个模拟的方法，实际应用中可能需要打开编辑模态或跳转页面
      console.log('编辑商品', this.goods[index]);
    }
  }
};
</script>