首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

Vue SPA 入门案例 单表 班级管理

班级查询 需求:         绘制表单,数据绑定         页面加载成功发送请求查询所有班级         将班级数据赋值给classesList 前端: <template>

<td

03

【学生管理系统】班级管理

<template>  <el-card class="classes-add-card">    <el-form ref="form" :model="classes" label-width="100px">      <el-form-item label="班级ID">        <el-input v-model="classes.cid"></el-input>      </el-form-item>      <el-form-item label="班级名称">        <el-input v-model="classes.cname"></el-input>      </el-form-item>      <el-form-item label="选择老师">        <el-select v-model="classes.teacherIds" multiple placeholder="请选择老师" style="width: 100%">          <el-option v-for="(teacher,index) in teacherList" :key="index" :label="teacher.tname" :value="teacher.tid"></el-option>        </el-select>      </el-form-item>      <el-form-item label="授课老师">      </el-form-item>      <el-form-item label="助理老师">      </el-form-item>      <el-form-item label="辅导员老师">      </el-form-item>      <el-form-item>        <el-button type="primary">添加</el-button>        <el-button>重置</el-button>      </el-form-item>    </el-form>    {{classes}}  </el-card> </template> ​ <script> export default {  data() {    return {      classes: {        teacherIds: []      //选择的所有老师     },      teacherList: [],      //老师列表   } },  methods: {    async findAllTeacher() {      let { data:baseResult } = await this.$axios.get('/classes-service/teacher')      // 获得结果      this.teacherList = baseResult.data   } },  mounted() {    //查询所有的老师    this.findAllTeacher() }, } </script> ​ <style>  .classes-add-card {    width: 500px; } </style>

04
领券
编号 班级名称 班级描述