vue2中的编辑和删除功能怎么写

编辑功能主要是需要将数据展示在表单中，用户修改后再提交到后端进行更新。一个简单的实现可以如下：

1. 在表格中添加编辑按钮，给每个按钮设置一个唯一的id。

<template>
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in dataList" :key="item.id">
        <td>{{ index + 1 }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>
          <button @click="editItem(item.id)">编辑</button>
          <button @click="deleteItem(item.id)">删除</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

2. 在组件中添加编辑表单，并通过v-if控制表格和表单的显示

<template>
  <div>
    <table v-if="!isEditing">
      <!-- ...省略 -->
    </table>
    <form v-if="isEditing">
      <label for="name">姓名：</label>
      <input type="text" id="name" v-model="editData.name" />
      <label for="age">年龄：</label>
      <input type="number" id="age" v-model="editData.age" />
      <button @click.prevent="saveEditItem">保存</button>
      <button @click.prevent="cancelEditItem">取消</button>
    </form>
  </div>
</template>

3. 在组件中添加data属性，用于存储编辑的数据和表格的数据

export default {
  data() {
    return {
      dataList: [], // 表格数据
      editData: {}, // 编辑数据
      isEditing: false // 是否处于编辑状态
    };
  },
  methods: {
    editItem(id) {
      // 根据id获取数据
      const data = this.dataList.find(item => item.id === id);
      // 将数据赋值给编辑数据
      this.editData = { ...data };
      this.isEditing = true;
    },
    saveEditItem() {
      // 发送请求更新数据
      // 更新成功后，将编辑数据赋值给表格数据
      const index = this.dataList.findIndex(item => item.id === this.editData.id);
      this.dataList.splice(index, 1, this.editData);
      this.isEditing = false;
    },
    cancelEditItem() {
      this.isEditing = false;
    },
    deleteItem(id) {
      // 发送请求删除数据
      // 删除成功后，从表格数据中删除该条数据
      const index = this.dataList.findIndex(item => item.id === id);
      this.dataList.splice(index, 1);
    }
  }
};

删除功能比较简单，只需要发送请求删除数据，并从表格数据中删除即可。