vue动态添加删除表格行

Vue.js 中动态添加和删除表格行通常通过 `v-for` 指令配合数组操作来实现。以下是一个简单的步骤：

1. **数据模型**：首先，你需要维护一个数组来存储表格的数据。比如，你可以创建一个名为 `items` 的 Vue实例数据属性。

data() {
  return {
    items: [
      { id: 0, name: 'Row 1' },
      { id: 1, name: 'Row 2' }
    ]
  };
}

2. **模板**：然后，在HTML模板中，使用 `v-for` 来渲染每一行，并提供添加和删除按钮。

<table>
  <tr v-for="item in items">
    <td>{{ item.name }}</td>
    <td><button @click="removeItem(item)">删除</button></td>
  </tr>
</table>

<!-- 添加行的按钮 -->
<button @click="addItem()">添加新行</button>

3. **方法**：定义 `addItem` 和 `removeItem` 方法来处理添加和删除操作。例如：

methods: {
  addItem() {
    this.items.push({ id: this.items.length, name: 'New Row' });
  },
  removeItem(item) {
    this.items = this.items.filter(i => i !== item);
  }
}

现在，每当你点击添加按钮，会往 `items` 数组中追加一行；点击删除按钮，则从数组中移除对应的项。