vue实现表格增加删除

在Vue.js中实现表格的增删功能，通常会结合Vuex（状态管理库）来管理和同步数据，以及事件监听和指令来操作DOM。以下是基本步骤：

1. **数据模型**：
创建一个数组，在Vuex store中存储表格的数据。例如：

   state: {
     tableData: [
       { id: 1, name: 'Item 1' },
       { id: 2, name: 'Item 2' }
     ]
   }

2. **模板渲染**：
使用`v-for`遍历数据，并提供添加和删除按钮：

   <table>
     <tr v-for="(item, index) in $store.state.tableData">
       <!-- ... item内容 -->
       <td><button @click="deleteRow(index)">删除</button></td>
     </tr>
     <tr>
       <td><input type="text" v-model="$store.state.newRow.name" @keyup.enter="addRow"></td>
       <td><button @click="addRow">添加</button></td>
     </tr>
   </table>

3. **方法实现**：
- `deleteRow(index)`：从`tableData`中移除对应索引的项，并更新store状态。
- `addRow()`：将新的行添加到`tableData`数组末尾，然后清除新行输入框的内容。

4. **Vuex操作**：
- 更新`deleteRow`方法需要通过`this.$store.dispatch('deleteRow', index)`来触发动作并更新state。
- 对于`addRow`，可以直接修改state，因为一般不需要通知所有组件，但在大规模应用中可能需要创建一个新的mutation。

5. **事件监听和指令**：
如果有其他组件需要响应表的变化，可以使用Vue的`@update:tableData`监听器，或者自定义事件系统如Event Bus。

// 示例中的actions和mutations可能长这样
actions: {
  deleteRow({ commit }, index) {
    this.$store.dispatch('removeItem', index);
  },
  addRow({ commit }) {
    commit('addItem', { name: '' });
  }
},
mutations: {
  addItem(state, newItem) {
    state.tableData.push(newItem);
  },
  removeItem(state, index) {
    state.tableData.splice(index, 1);
  }
}