帮我写一个支持编辑的Vue表格代码
时间: 2023-04-06 21:04:43 浏览: 86
好的,我可以为您提供一个支持编辑的Vue表格代码。以下是示例代码:
<template>
<div>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in items" :key="index">
<td>{{ item.id }}</td>
<td>
<input type="text" v-model="item.name" :disabled="!item.editing" />
</td>
<td>
<input type="number" v-model="item.age" :disabled="!item.editing" />
</td>
<td>
<button v-if="!item.editing" @click="editItem(index)">Edit</button>
<button v-if="item.editing" @click="saveItem(index)">Save</button>
<button @click="deleteItem(index)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: "John", age: 25, editing: false },
{ id: 2, name: "Jane", age: 30, editing: false },
{ id: 3, name: "Bob", age: 35, editing: false },
],
};
},
methods: {
editItem(index) {
this.items[index].editing = true;
},
saveItem(index) {
this.items[index].editing = false;
},
deleteItem(index) {
this.items.splice(index, 1);
},
},
};
</script>
请注意,这只是一个示例代码,您可以根据您的需求进行修改和定制。