在vue实现学生表格

创建 Vue 项目

使用 Vue CLI 或 Vite 初始化项目：

npm init vue@latest student-table
cd student-table
npm install

安装依赖（如需）

若需表格功能增强，可安装 element-plus 或 vxe-table：

npm install element-plus

组件结构设计

在 src/components 下创建 StudentTable.vue，包含以下核心部分：

<template>
  <div>
    <el-table :data="students" style="width: 100%">
      <el-table-column prop="id" label="学号" width="180" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="grade" label="班级" />
    </el-table>
  </div>
</template>

数据定义与模拟

在 script 部分定义学生数据：

<script>
export default {
  data() {
    return {
      students: [
        { id: '1001', name: '张三', age: 18, grade: '高一(1)班' },
        { id: '1002', name: '李四', age: 17, grade: '高一(2)班' }
      ]
    }
  }
}
</script>

动态数据加载（可选）

通过 API 获取数据示例：

methods: {
  async fetchStudents() {
    const res = await fetch('https://api.example.com/students');
    this.students = await res.json();
  }
},
mounted() {
  this.fetchStudents();
}

添加交互功能

实现新增、删除操作：

<template>
  <el-button @click="addStudent">新增学生</el-button>
  <el-table>
    ...
    <el-table-column label="操作">
      <template #default="scope">
        <el-button @click="deleteStudent(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
methods: {
  addStudent() {
    this.students.push({ id: '1003', name: '王五', age: 16, grade: '高一(3)班' });
  },
  deleteStudent(id) {
    this.students = this.students.filter(s => s.id !== id);
  }
}
</script>

样式优化

在 <style> 中添加自定义样式：

.el-table {
  margin-top: 20px;
}
.el-button {
  margin-bottom: 10px;
}

注册并使用组件

在父组件中引入：

import StudentTable from './components/StudentTable.vue';
export default {
  components: { StudentTable }
}

模板中直接使用：

<StudentTable />