<template>
<div>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in items" :key="index">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>
<button @click="editItem(index)">Edit</button>
<button @click="deleteItem(index)">Delete</button>
</td>
</tr>
</tbody>
</table>
<form @submit.prevent="addItem" v-if="showForm">
<input type="text" v-model="newItem.name" placeholder="Name" required />
<button type="submit">Add</button>
</form>
<form @submit.prevent="updateItem" v-if="showForm && editIndex !== null">
<input type="text" v-model="newItem.name" placeholder="Name" required />
<button type="submit">Update</button>
</form>
<button @click="showForm = true">Add Item</button>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
interface Item {
id: number;
name: string;
}
const items = ref<Item[]>([
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
]);
const newItem = ref<Item>({ id: 0, name: '' });
const editIndex = ref<number | null>(null);
const showForm = ref(false);
const addItem = () => {
newItem.value.id = items.value.length + 1;
items.value.push({ ...new.value });
newItem.value.name = '';
showForm.value = false;
};
const editItem = (index: number) => {
editIndex.value = index;
newItem = { ...items.value[index] };
showForm.value = true;
};
const updateItem = () => {
if (editIndex.value !== null) {
items.value[editIndex.value] = { ...newItem.value };
newItem.value.name = '';
editIndex.value = null;
showForm.value = false;
}
};
const deleteItem = (index: number) => {
items.value.splice(index, 1);
};
</script>
items
是一个响应式的数组,存储了表格的数据。newItem
是一个响应式的对象,用于存储新增或编辑的数据。editIndex
是一个响应式的变量,用于记录当前正在编辑的数据的索引。showForm
是一个响应式的变量,控制表单的显示与隐藏。
在模板中,使用v-for
指令遍历items
数组,并使用v-model
指令将输入框与newItem.name
绑定。通过点击"Add Item"按钮,可以显示添加数据的表单。通过点击"Edit"按钮,可以显示编辑数据的表单,并将编辑的数据填充到输入框中。通过点击"Delete"按钮,可以删除对应的数据。
在脚本部分,定义了addItem
、editItem
、updateItem
和deleteItem
等方法来处理表单的提交、编辑、更新和删除操作。
-
在
addItem
方法中,给newItem
对象的id
属性赋予一个新的值,并将其添加到items
数组中。 -
在
editItem
方法中,将正在编辑的数据的索引赋值给editIndex
变量,并将对应的数据填充到newItem
对象中。 -
在
updateItem
方法中,根据editIndex
变量更新items
数组中对应的数据。在deleteItem
方法中,使用splice
方法从items
数组中删除对应的数据。