vue3教师管理系统增删改查实现

好的，我会简单介绍一下Vue3实现教师管理系统的增删改查功能。

首先，我们需要定义一个学生对象，包含学生的姓名、性别、年龄等信息。然后，我们可以使用Vue3的Composition API创建一个Vue组件，实现增删改查功能。

1. 实现列表展示功能

首先，我们需要在组件中定义一个students数组，用于存储所有学生的信息。我们可以使用v-for指令遍历数组，将每个学生的信息展示出来。

<template>
  <div>
    <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.gender }}</td>
          <td>{{ student.age }}</td>
          <td>
            <button @click="editStudent(index)">编辑</button>
            <button @click="deleteStudent(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const students = reactive([
      { name: '张三', gender: '男', age: 18 },
      { name: '李四', gender: '女', age: 20 },
      { name: '王五', gender: '男', age: 22 }
    ]);

    return {
      students,
      editStudent,
      deleteStudent
    };

    function editStudent(index) {
      // todo
    }

    function deleteStudent(index) {
      // todo
    }
  }
}
</script>

2. 实现添加功能

我们可以在组件中添加一个表单，用于添加新的学生信息。当用户点击“添加”按钮时，我们可以使用unshift方法将新的学生信息添加到students数组中。

<template>
  <div>
    <table>
      <!-- 列表展示功能 -->
    </table>

    <!-- 添加学生表单 -->
    <form @submit.prevent="addStudent">
      <div>
        <label>姓名：</label>
        <input type="text" v-model="newStudent.name">
      </div>
      <div>
        <label>性别：</label>
        <input type="radio" value="男" v-model="newStudent.gender">男
        <input type="radio" value="女" v-model="newStudent.gender">女
      </div>
      <div>
        <label>年龄：</label>
        <input type="number" v-model="newStudent.age">
      </div>
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const students = reactive([
      { name: '张三', gender: '男', age: 18 },
      { name: '李四', gender: '女', age: 20 },
      { name: '王五', gender: '男', age: 22 }
    ]);

    const newStudent = reactive({
      name: '',
      gender: '',
      age: ''
    });

    function addStudent() {
      students.unshift(newStudent);
      newStudent.name = '';
      newStudent.gender = '';
      newStudent.age = '';
    }

    return {
      students,
      newStudent,
      addStudent,
      editStudent,
      deleteStudent
    };

    function editStudent(index) {
      // todo
    }

    function deleteStudent(index) {
      // todo
    }
  }
}
</script>

3. 实现编辑功能

当用户点击“编辑”按钮时，我们可以将对应学生的信息填充到表单中，让用户可以修改学生信息。当用户点击“保存”按钮时，我们可以更新students数组中对应学生的信息。

<template>
  <div>
    <table>
      <!-- 列表展示功能 -->
    </table>

    <!-- 添加学生表单 -->
    <form @submit.prevent="addStudent">
      <!-- 添加学生表单内容 -->
    </form>

    <!-- 编辑学生表单 -->
    <form v-if="isEditing" @submit.prevent="saveStudent">
      <div>
        <label>姓名：</label>
        <input type="text" v-model="editingStudent.name">
      </div>
      <div>
        <label>性别：</label>
        <input type="radio" value="男" v-model="editingStudent.gender">男
        <input type="radio" value="女" v-model="editingStudent.gender">女
      </div>
      <div>
        <label>年龄：</label>
        <input type="number" v-model="editingStudent.age">
      </div>
      <button type="submit">保存</button>
      <button @click="cancelEdit">取消</button>
    </form>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue';

export default {
  setup() {
    const students = reactive([
      { name: '张三', gender: '男', age: 18 },
      { name: '李四', gender: '女', age: 20 },
      { name: '王五', gender: '男', age: 22 }
    ]);

    const newStudent = reactive({
      name: '',
      gender: '',
      age: ''
    });

    const editingStudent = reactive({
      name: '',
      gender: '',
      age: ''
    });

    const isEditing = reactive(false);

    function addStudent() {
      // 添加学生功能
    }

    function editStudent(index) {
      // 填充编辑表单内容
      editingStudent.name = students[index].name;
      editingStudent.gender = students[index].gender;
      editingStudent.age = students[index].age;
      isEditing.value = true;
    }

    function saveStudent() {
      // 更新学生信息
      const index = students.findIndex(student => student.name === editingStudent.name);
      students.splice(index, 1, editingStudent);
      editingStudent.name = '';
      editingStudent.gender = '';
      editingStudent.age = '';
      isEditing.value = false;
    }

    function cancelEdit() {
      // 取消编辑
      editingStudent.name = '';
      editingStudent.gender = '';
      editingStudent.age = '';
      isEditing.value = false;
    }

    function deleteStudent(index) {
      // 删除学生功能
    }

    return {
      ...toRefs(students),
      ...toRefs(newStudent),
      ...toRefs(editingStudent),
      ...toRefs(isEditing),
      addStudent,
      editStudent,
      saveStudent,
      cancelEdit,
      deleteStudent
    };
  }
}
</script>

4. 实现删除功能

当用户点击“删除”按钮时，我们可以使用splice方法将对应学生从students数组中删除。

<template>
  <div>
    <table>
      <!-- 列表展示功能 -->
    </table>

    <!-- 添加学生表单 -->
    <form @submit.prevent="addStudent">
      <!-- 添加学生表单内容 -->
    </form>

    <!-- 编辑学生表单 -->
    <form v-if="isEditing" @submit.prevent="saveStudent">
      <!-- 编辑学生表单内容 -->
    </form>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue';

export default {
  setup() {
    const students = reactive([
      { name: '张三', gender: '男', age: 18 },
      { name: '李四', gender: '女', age: 20 },
      { name: '王五', gender: '男', age: 22 }
    ]);

    const newStudent = reactive({
      name: '',
      gender: '',
      age: ''
    });

    const editingStudent = reactive({
      name: '',
      gender: '',
      age: ''
    });

    const isEditing = reactive(false);

    function addStudent() {
      // 添加学生功能
    }

    function editStudent(index) {
      // 编辑学生功能
    }

    function saveStudent() {
      // 保存学生信息功能
    }

    function cancelEdit() {
      // 取消编辑功能
    }

    function deleteStudent(index) {
      students.splice(index, 1);
    }

    return {
      ...toRefs(students),
      ...toRefs(newStudent),
      ...toRefs(editingStudent),
      ...toRefs(isEditing),
      addStudent,
      editStudent,
      saveStudent,
      cancelEdit,
      deleteStudent
    };
  }
}
</script>

以上就是一个简单的Vue3教师管理系统的增删改查实现，希望对你有帮助。