vue.js删除增加表格行

在 Vue.js 中，如果你想要操作表格（如数据表格或动态生成的表格），添加和删除行通常会涉及到数据驱动视图的概念。你可以使用数组方法来管理表格的数据源，然后通过模板的 v-for 循环渲染每一行。

以下是基本步骤：

1. **创建数据**：在你的 Vue 实例中创建一个数组来存储表格的数据。例如：

   data() {
     return {
       items: [
         { name: 'Row 1', value: 'Value 1' },
         { name: 'Row 2', value: 'Value 2' }
       ]
     }
   }

2. **模板绑定**：在你的 HTML 模板中，使用 `v-for` 来迭代这个数组：

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

3. **处理操作**：定义一个方法来删除特定的项目，比如 `removeItem`：

   methods: {
     removeItem(item) {
       this.items.splice(this.items.indexOf(item), 1); // 使用 splice 删除指定索引的元素
     }
   }

4. **添加新行**：如果你想让用户能够添加新行，可以添加一个表单和按钮，在点击按钮时调用一个添加方法，并将新的对象推入数组：

   methods: {
     addItem() {
       this.items.push({ name: '', value: '' }); // 添加空的对象
     }
   }

当你在模板上点击删除按钮时，Vue 将自动更新视图，因为数据变化会触发响应式系统的更新。