帮我用vue2写一个增删改查的页面

当然可以，下面是一个简单的 Vue2 增删改查页面的示例：

<template>
  <div>
    <h2>用户列表</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(user, index) in userList" :key="index">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
          <td>
            <button @click="editUser(index)">编辑</button>
            <button @click="deleteUser(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <h2>{{ isEditMode ? '编辑用户' : '添加用户' }}</h2>
    <form @submit.prevent="submitForm">
      <label>
        ID:
        <input type="text" v-model="form.id" :disabled="isEditMode" />
      </label>
      <label>
        姓名:
        <input type="text" v-model="form.name" />
      </label>
      <label>
        年龄:
        <input type="number" v-model="form.age" />
      </label>
      <button type="submit">{{ isEditMode ? '保存' : '添加' }}</button>
      <button type="button" @click="cancelEdit" v-if="isEditMode">取消</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 25 },
        { id: 3, name: '王五', age: 30 },
      ],
      form: {
        id: '',
        name: '',
        age: '',
      },
      isEditMode: false,
      editIndex: -1,
    };
  },
  methods: {
    editUser(index) {
      this.isEditMode = true;
      this.editIndex = index;
      this.form = { ...this.userList[index] };
    },
    deleteUser(index) {
      if (confirm(`确定删除用户 ${this.userList[index].name} 吗？`)) {
        this.userList.splice(index, 1);
      }
    },
    submitForm() {
      if (this.isEditMode) {
        this.userList[this.editIndex] = { ...this.form };
      } else {
        this.userList.push({ ...this.form });
      }
      this.resetForm();
    },
    resetForm() {
      this.form = { id: '', name: '', age: '' };
      this.isEditMode = false;
      this.editIndex = -1;
    },
    cancelEdit() {
      this.resetForm();
    },
  },
};
</script>

这个页面实现了一个简单的用户列表，包括添加、编辑和删除用户的功能。用户列表使用了一个 HTML 表格，每行显示一个用户的信息，最后一列有两个按钮，用于编辑和删除用户。在添加和编辑用户时，页面上方会显示一个表单，用户可以填写和修改用户的信息。提交表单时，会根据当前是添加用户还是编辑用户来执行不