vue实现可新增、删除、修改、复制、复原及提交的表格

在Vue中实现一个可新增、删除、修改、复原及提交的表格，可以通过v-model绑定数据，使用v-for指令循环渲染表格行，并结合计算属性和方法来管理数据的状态。以下是一个简化的示例：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>名称</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in items" :key="item.id">
          <td>{{ index + 1 }}</td>
          <td><input v-model="item.name" /></td>
          <td>
            <button @click="removeItem(index)">删除</button>
            <button @click="revertItem(index)">复原</button>
            <button @click="duplicateItem(index)">复制</button>
          </td>
        </tr>
      </tbody>
    </table>
    <button @click="submit">提交</button>
    <button @click="addItem">新增</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        // ...可以初始化更多项
      ],
      lastCommit: null, // 存储上一次提交的数据，用于恢复
    };
  },
  methods: {
    addItem() {
      const newId = this.items.length + 1;
      this.items.push({ id: newId, name: `Item ${newId}` });
    },
    removeItem(index) {
      this.lastCommit = JSON.parse(JSON.stringify(this.items)); // 复制当前状态
      this.items.splice(index, 1);
    },
    revertItem(index) {
      if (this.lastCommit) {
        this.items = JSON.parse(JSON.stringify(this.lastCommit));
      }
    },
    duplicateItem(index) {
      const duplicateItem = JSON.parse(JSON.stringify(this.items[index]));
      this.items.push(duplicateItem);
    },
    submit() {
      this.lastCommit = JSON.parse(JSON.stringify(this.items)); // 提交后复制当前状态
      // 处理提交逻辑...
    },
  },
};
</script>

在这个示例中，我们使用了一个items数组来存储表格数据。通过addItem方法可以添加新项，removeItem方法会删除指定项并将当前状态存储到lastCommit以便复原，duplicateItem方法会复制指定项，submit方法会将当前状态存储到lastCommit并执行提交操作。如果需要恢复到之前提交的状态，可以调用revertItem方法。