vue实现学员信息管理，有添加和重置按钮，并在下方表单中显示出来

在Vue.js中实现学员信息管理，你可以按照以下步骤构建一个基本的组件结构：

1. **创建Vue组件**：首先，你需要在项目中创建一个新的Vue组件，比如`StudentInfoManager.vue`。

<template>
  <div>
    <h2>学员信息管理</h2>
    
    <!-- 添加学员按钮 -->
    <button @click="addStudent">添加学员</button>

    <!-- 重置表单按钮 -->
    <button @click="resetForm">重置表单</button>

    <!-- 表单部分 -->
    <form ref="studentForm">
      <label for="name">姓名:</label>
      <input type="text" v-model="newStudent.name" id="name">
      
      <label for="age">年龄:</label>
      <input type="number" v-model="newStudent.age" id="age">

      <!-- 其他字段... -->

      <button @click.prevent="submitForm">保存</button>
    </form>
    
    <!-- 显示已有学员列表 -->
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <!-- 添加其他列... -->
        </tr>
      </thead>
      <tbody>
        <tr v-for="(student, index) in students" :key="index">
          <td>{{ student.name }}</td>
          <td>{{ student.age }}</td>
          <!-- 显示更多字段... -->
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newStudent: { name: '', age: '' }, // 新学员初始数据
      students: [], // 已有学员数组

      // 表单提交状态
      isSubmitting: false,
    };
  },
  methods: {
    addStudent() {
      this.students.push(this.newStudent); // 添加新学员到列表
      this.newStudent = {}; // 清空新学员信息
    },
    resetForm() {
      this.newStudent = {}; // 清空新学员信息
    },
    submitForm(e) {
      if (!this.isSubmitting) {
        this.isSubmitting = true;
        // 在这里处理实际的保存逻辑，例如发送API请求等...
        setTimeout(() => {
          this.addStudent(); // 成功后更新列表
          this.isSubmitting = false;
        }, 1000);
      }
    },
  },
};
</script>

在这个例子中，我们定义了一个Vue组件，其中包含一个添加学员的按钮、一个重置表单的按钮以及一个用于输入新学员信息的表单。当用户点击“保存”按钮时，会模拟异步操作并添加新的学员到列表。