在vue.js中，在表格中输入学生姓名，学生学号，学生性别，学生所属学院，学生班级，学生电话等信息，通过一个按钮将学生信息添加至studentList中，并将studentList中信息显示给<table>标签，并且为每个学生添加修改和删除动作但学号不能修改

在 Vue 中创建这样的功能，你可以使用模板、数据绑定和事件处理。首先，定义数据结构 `studentList` 和表单字段。然后，构建表格组件并为其添加增删改操作。

<template>
  <div>
    <form @submit.prevent="addStudent">
      <input v-model="newStudent.name" placeholder="学生姓名">
      <input v-model="newStudent.studentID" disabled placeholder="学号（不可修改）">
      <select v-model="newStudent.gender">
        <option value="">选择性别</option>
        <option>男</option>
        <option>女</option>
      </select>
      <input v-model="newStudent.college" placeholder="学院">
      <input v-model="newStudent.class" placeholder="班级">
      <input v-model="newStudent.phone" placeholder="电话">
      <button type="submit">添加学生</button>
    </form>

    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>学号</th>
          <th>性别</th>
          <th>学院</th>
          <th>班级</th>
          <th>电话</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(student, index) in studentList" :key="index">
          <td>{{ student.name }}</td>
          <td>{{ student.studentID }}</td>
          <td>{{ student.gender }}</td>
          <td>{{ student.college }}</td>
          <td>{{ student.class }}</td>
          <td>{{ student.phone }}</td>
          <td>
            <button @click="editStudent(index)">编辑</button>
            <button @click="deleteStudent(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newStudent: {
        name: '',
        studentID: '0000', // 假设初始固定学号
        gender: '',
        college: '',
        class: '',
        phone: ''
      },
      studentList: []
    };
  },
  methods: {
    addStudent() {
      if (!this.newStudent.name || !this.newStudent.gender || !this.newStudent.college || !this.newStudent.class) {
        alert('请填写完整信息');
        return;
      }
      this.studentList.push(this.newStudent);
      this.newStudent = {}; // 清空新学生对象
    },
    editStudent(index) {
      // 编辑逻辑，这里简化为获取当前行的数据
      const editedStudent = { ...this.studentList[index] };
      // 在模态框或新页面中进行编辑，编辑完成后更新列表
      this.editModal(editedStudent); // 假设有个名为editModal的方法处理编辑
    },
    deleteStudent(index) {
      this.studentList.splice(index, 1);
    }
  }
};
</script>