下拉列表前端实现步骤

电玩女神 2021-07-25 02:33 651阅读 0赞

一 组件脚本

Info.vue组件中引入teacher api

  1. import teacherApi from '@/api/teacher'

定义data

  1. teacherList: [] // 讲师列表

methods中获取讲师列表

  1. // 获取讲师列表
  2.     initTeacherList() {
  3.       teacherApi.list().then(response => {
  4.         this.teacherList = response.data.items
  5.       })
  6.     },

组件初始化时获取讲师列表

  1. created() {
  2.     // 讲师列表
  3.     this.initTeacherList()
  4.   },

二 组件模板

  1. <!-- 课程讲师 -->
  2.       <el-form-item label="课程讲师">
  3.         <el-select v-model="courseInfo.teacherId" placeholder="请选择">
  4.           <el-option
  5.             v-for="teacher in teacherList"
  6.             :key="teacher.id"
  7.             :value="teacher.id"
  8.             :label="teacher.name" />
  9.         </el-select>
  10.       </el-form-item>

三 测试效果

20201205151431513.png

发表评论

表情：
评论列表 （有 0 条评论，651人围观）

还没有评论，来说两句吧...

相关阅读