vue实现增删改功能
Vue 实现增删改功能
在 Vue 中实现增删改功能通常需要结合数据绑定、事件处理和状态管理。以下是具体实现方法：
数据准备
定义一个数据列表和表单数据对象：
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
],
form: {
id: null,
name: ''
},
isEditing: false
}
}新增功能
创建一个方法处理新增操作：
methods: {
addItem() {
if (!this.form.name.trim()) return
const newItem = {
id: Date.now(),
name: this.form.name
}
this.items.push(newItem)
this.resetForm()
}
}编辑功能
实现编辑功能需要先填充表单：
editItem(item) {
this.isEditing = true
this.form = { ...item }
}然后更新保存方法：
updateItem() {
const index = this.items.findIndex(i => i.id === this.form.id)
if (index !== -1) {
this.items.splice(index, 1, { ...this.form })
this.resetForm()
}
}删除功能
删除操作通过数组方法实现：
deleteItem(id) {
this.items = this.items.filter(item => item.id !== id)
}表单重置
添加重置表单的方法：
resetForm() {
this.form = {
id: null,
name: ''
}
this.isEditing = false
}模板实现
在模板中绑定这些方法：
<template>
<div>
<form @submit.prevent="isEditing ? updateItem() : addItem()">
<input v-model="form.name" placeholder="Item name">
<button type="submit">{{ isEditing ? 'Update' : 'Add' }}</button>
<button v-if="isEditing" @click="resetForm">Cancel</button>
</form>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
<button @click="editItem(item)">Edit</button>
<button @click="deleteItem(item.id)">Delete</button>
</li>
</ul>
</div>
</template>完整组件示例
<template>
<!-- 同上模板内容 -->
</template>
<script>
export default {
data() {
return {
items: [],
form: {
id: null,
name: ''
},
isEditing: false
}
},
methods: {
addItem() {
if (!this.form.name.trim()) return
this.items.push({
id: Date.now(),
name: this.form.name
})
this.resetForm()
},
editItem(item) {
this.isEditing = true
this.form = { ...item }
},
updateItem() {
const index = this.items.findIndex(i => i.id === this.form.id)
if (index !== -1) {
this.items.splice(index, 1, { ...this.form })
this.resetForm()
}
},
deleteItem(id) {
this.items = this.items.filter(item => item.id !== id)
},
resetForm() {
this.form = {
id: null,
name: ''
}
this.isEditing = false
}
}
}
</script>这种实现方式适用于大多数基础CRUD场景，可以根据实际需求进行扩展和优化。
