在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 />
