讲师下拉列表
# 一、前端实现
# 1、组件模板
<!-- 课程讲师 -->
<el-form-item label="课程讲师">
<el-select
v-model="courseInfo.teacherId"
placeholder="请选择">
<el-option
v-for="teacher in teacherList"
:key="teacher.id"
:label="teacher.name"
:value="teacher.id"/>
</el-select>
</el-form-item>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 2、定义api
api/edu/teacher.js
getList() {
return request({
url: api_name,
method: 'get'
})
},
1
2
3
4
5
6
2
3
4
5
6
组件中引入teacher api
import teacher from '@/api/edu/teacher'
1
# 3、组件脚本
定义data
teacherList: [] // 讲师列表
1
表单初始化时获取讲师列表
init() {
......
// 获取讲师列表
this.initTeacherList()
},
initTeacherList() {
teacher.getList().then(response => {
this.teacherList = response.data.items
})
},
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
编辑 (opens new window)
上次更新: 2024/06/15, 15:12:25