在Vue中实现表格数据的增删改查，你可以使用Vue的响应式特性和组件化的方法。以下是一个简单的示例，展示了如何实现这些功能：
<template>
<div>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in items" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>
<button @click="editItem(index)">Edit</button>
<button @click="deleteItem(index)">Delete</button>
</td>
</tr>
</tbody>
</table>
<div v-if="editMode">
<input type="text" v-model="editItemId">
<input type="text" v-model="editItemName">
<input type="number" v-model="editItemAge">
<button @click="updateItem">Update</button>
<button @click="cancelEdit">Cancel</button>
</div>
<div v-else>
<input type="text" v-model="newItemName">
<input type="number" v-model="newItemAge">
<button @click="addItem">Add</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'John Doe', age: 30 },
{ id: 2, name: 'Jane Smith', age: 25 },
// ... more items
],
newItemName: '',
newItemAge: null,
editMode: false,
editItemId: null,
editItemName: '',
editItemAge: null,
};
},
methods: {
addItem() {
const newItem = {
id: this.items.length + 1,
name: this.newItemName,
age: this.newItemAge
};
this.items.push(newItem);
this.newItemName = '';
this.newItemAge = null;
},
editItem(index) {
this.editMode = true;
this.editItemId = this.items[index].id;
this.editItemName = this.items[index].name;
this.editItemAge = this.items[index].age;
},
updateItem() {
const index = this.items.findIndex(item => item.id === this.editItemId);
if (index !== -1) {
this.items.splice(index, 1, {
id: this.editItemId,
name: this.editItemName,
age: this.editItemAge
});