vue2简易学生管理功能

Vue2是一个轻量级的前端JavaScript框架，用于构建用户界面。在开发一个简易的学生管理系统中，我们可以创建以下几个关键组件：

1. **学生列表** (Student List): 这个组件显示所有学生的列表，包含每个学生的基本信息如姓名、学号等，并提供搜索、排序等功能。

<template>
  <div>
    <input v-model="searchTerm" placeholder="搜索学生...">
    <table>
      <tr>
        <th>姓名</th>
        <th>学号</th>
      </tr>
      <tr v-for="(student, index) in filteredStudents" :key="index">
        <td>{{ student.name }}</td>
        <td>{{ student.id }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchTerm: "",
      students: [], // 存储学生数据
    };
  },
  computed: {
    filteredStudents() {
      return this.students.filter(student => 
        student.name.toLowerCase().includes(this.searchTerm.toLowerCase())
      );
    }
  },
};
</script>

2. **添加/编辑学生** (Add/Edit Student): 用户可以点击按钮新增学生，或者编辑已有学生的信息，通过表单输入姓名和学号等字段。

<template>
  <form @submit.prevent="saveStudent">
    <input type="text" v-model="newStudent.name" placeholder="姓名">
    <input type="text" v-model="newStudent.id" placeholder="学号">
    <button type="submit">保存</button>
  </form>
</template>

<script>
export default {
  methods: {
    saveStudent() {
      // 实际应用中，这里会发送请求到服务器
      this.students.push(this.newStudent);
      this.newStudent = {}; // 清空表单
    },
  },
  data() {
    return {
      newStudent: { name: "", id: "" },
    };
  },
};
</script>

3. **删除学生** (Delete Student): 提供一个确认删除的弹窗，当用户选择某个学生并确认删除操作时，从列表中移除该学生。

<template>
  <button @click="confirmDelete(student)">删除</button>
</template>

<script>
export default {
  methods: {
    confirmDelete(student) {
      this.$confirm('确定要删除吗?', '警告', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.students.splice(this.students.indexOf(student), 1);
      });
    },
  },
};
</script>