vue的表单编辑删除，保存取消功能

对于Vue表单的编辑、删除、保存和取消功能，可以采用以下步骤实现：

1. 编辑功能：将表单绑定到一个数据对象上，例如使用v-model指令将表单值绑定到data中的一个属性上；当点击编辑按钮时，将表单中的值复制到一个临时变量中，并将表单设置为可编辑状态。

2. 删除功能：当点击删除按钮时，弹出确认框，确认删除后将数据从数据对象中删除，并更新视图。

3. 保存功能：当点击保存按钮时，将表单中的值更新到数据对象中，并将表单设置为不可编辑状态。

4. 取消功能：当点击取消按钮时，将表单中的值恢复为编辑前的临时变量，并将表单设置为不可编辑状态。

下面是一个简单的示例代码：

<template>
  <div>
    <form>
      <input type="text" v-model="formData.name" :disabled="!isEditing" />
      <input type="text" v-model="formData.email" :disabled="!isEditing" />
      <button v-if="!isEditing" @click="editForm">编辑</button>
      <button v-else @click="saveForm">保存</button>
      <button v-else @click="cancelEdit">取消</button>
      <button @click="deleteData">删除</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: '',
      },
      tempData: null,
      isEditing: false,
    }
  },
  methods: {
    editForm() {
      this.tempData = { ...this.formData }
      this.isEditing = true
    },
    saveForm() {
      this.isEditing = false
    },
    cancelEdit() {
      this.formData = { ...this.tempData }
      this.isEditing = false
    },
    deleteData() {
      if (confirm('确认删除？')) {
        // 删除数据
        this.formData = { name: '', email: '' }
      }
    },
  },
}
</script>

在这个示例中，我们使用了一个数据对象`formData`来存储表单数据，并使用了一个临时变量`tempData`来存储编辑前的表单数据。在编辑状态下，表单上的输入框被设置为可编辑状态，保存和取消按钮被显示出来，编辑和删除按钮被隐藏。在非编辑状态下，表单输入框被设置为不可编辑状态，保存和取消按钮被隐藏，编辑和删除按钮被显示出来。当点击保存按钮时，表单数据会被更新到`formData`中，同时表单会回到非编辑状态。当点击取消按钮时，表单数据会恢复为编辑前的临时变量，同时表单会回到非编辑状态。当点击删除按钮时，会弹出确认框，确认删除后，数据会从`formData`中被删除，并将表单数据清空。