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场景，可以根据实际需求进行扩展和优化。