Vue Element 从零开始实现学生信息表格实战教程

2022-11-15 06:34:20

使用 Vue Element 构建一个全功能学生信息表格

在当今数字化时代，学校和大学严重依赖学生信息管理系统来有效地管理学生数据。本文将指导你使用流行的 JavaScript 框架 Vue.js 和 Element UI 库来构建一个全功能的学生信息表格，涵盖添加、修改、删除和模糊查询等基本操作。

前提条件

在你开始之前，请确保你的系统已满足以下要求：

Node.js
Vue.js
Vue Element
MySQL

项目搭建

创建新项目： 使用 Vue CLI 创建一个新的 Vue Element 项目。
安装依赖： 使用 npm 或 yarn 安装必要的依赖项，包括 Element UI 和 Axios（用于与后端通信）。

数据模型

为了存储学生信息，创建一个名为 Student.js 的模型文件，其中包含学生的属性（例如姓名、年龄、性别）。

表格组件

StudentTable.vue ：此组件显示学生信息表格，包括添加、编辑和删除功能。它使用 Element UI 的 el-table 组件。

表单组件

StudentForm.vue ：此组件处理添加和编辑学生信息的表单。它使用 el-form 和 el-input 组件。

模糊查询组件

StudentSearch.vue ：此组件实现对学生信息的模糊查询。它使用 el-input 和 el-button 组件。

主组件

App.vue ：此组件组合了所有其他组件，管理状态和处理与后端的通信。它使用 el-tabs 组件来切换表格和表单视图。

运行项目

使用 npm run serve 或 yarn serve 运行项目。在浏览器中打开 localhost:8080 查看表格。

代码示例

Student.js

export class Student {
  constructor(id, name, age, gender) {
    this.id = id;
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
}

StudentTable.vue

<template>
  <el-table :data="students" style="width: 100%">
    <el-table-column prop="id" label="ID" width="100"></el-table-column>
    <el-table-column prop="name" label="姓名" width="200"></el-table-column>
    <el-table-column prop="age" label="年龄" width="100"></el-table-column>
    <el-table-column prop="gender" label="性别" width="100"></el-table-column>
    <el-table-column label="操作" width="200">
      <template slot-scope="scope">
        <el-button @click="editStudent(scope.row)">编辑</el-button>
        <el-button @click="deleteStudent(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

StudentForm.vue

<template>
  <el-form :model="student">
    <el-form-item label="姓名">
      <el-input v-model="student.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄">
      <el-input v-model="student.age"></el-input>
    </el-form-item>
    <el-form-item label="性别">
      <el-radio-group v-model="student.gender">
        <el-radio label="男">男</el-radio>
        <el-radio label="女">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button @click="saveStudent">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

App.vue

<template>
  <div>
    <el-tabs>
      <el-tab-pane label="学生列表">
        <student-table :students="students"></student-table>
      </el-tab-pane>
      <el-tab-pane label="添加学生">
        <student-form @save="addStudent"></student-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>