vue简单的表格增删改查

好的，下面是一个简单的表格增删改查的示例：

<template>
  <div>
    <h1>学生列表</h1>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(student, index) in students" :key="index">
          <td>{{ student.name }}</td>
          <td>{{ student.age }}</td>
          <td>{{ student.gender }}</td>
          <td>
            <button @click="editStudent(index)">编辑</button>
            <button @click="deleteStudent(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <h2>添加学生</h2>
    <form @submit.prevent="addStudent">
      <label>姓名：</label>
      <input type="text" v-model="newStudent.name" />
      <br />
      <label>年龄：</label>
      <input type="number" v-model="newStudent.age" />
      <br />
      <label>性别：</label>
      <select v-model="newStudent.gender">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
      <br />
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: [
        { name: '小明', age: 18, gender: '男' },
        { name: '小红', age: 20, gender: '女' },
        { name: '小刚', age: 22, gender: '男' },
      ],
      newStudent: { name: '', age: '', gender: '' },
      editingIndex: -1,
    };
  },
  methods: {
    addStudent() {
      this.students.push({
        name: this.newStudent.name,
        age: this.newStudent.age,
        gender: this.newStudent.gender,
      });
      this.newStudent = { name: '', age: '', gender: '' };
    },
    editStudent(index) {
      this.editingIndex = index;
      this.newStudent = Object.assign({}, this.students[index]);
    },
    saveStudent() {
      this.students.splice(this.editingIndex, 1, this.newStudent);
      this.newStudent = { name: '', age: '', gender: '' };
      this.editingIndex = -1;
    },
    deleteStudent(index) {
      this.students.splice(index, 1);
    },
  },
};
</script>

这个示例中，我们使用了一个数组 `students` 来保存学生数据，然后在模板中使用 `v-for` 循环渲染出表格。我们通过一个表单来添加学生，然后通过编辑按钮可以编辑学生信息，最后通过删除按钮可以删除学生信息。其中，编辑学生和添加学生使用同一个表单，通过 `editingIndex` 变量来标记当前是否在编辑状态。如果 `editingIndex` 大于等于 0，表示当前正在编辑学生信息，此时点击添加按钮会执行保存操作，否则会执行添加操作。