vue+element实现异步下拉框渲染

vue+element实现异步下拉框渲染

---

一、api文件夹定义接口js文件

/* 课程类型接口 */

export function getCourseTypeList(params) {
	return request({
		url: '/coursetype/getList',
		method: 'post',
		params
	})
}

二、定义表单

代码如下（示例）：

<el-form-item label="课程类型">
					<el-select v-model="updform.tid" placeholder="请选择课程类型">
						<el-option v-for="item in tidArr" v-bind:label="item.tname" :value="item.tid"></el-option>
					</el-select>
				</el-form-item>

v-bind是用来绑定属性的！！！

三、定义数组进行赋值

代码如下（示例）：

data() {
			return {
				courseData: null,
				listLoading: true,
				tidArr: ''
			}
		},
		created() {
		//发送请求并且将拿到的数据赋值给定义的空数组tidArr
			getCourseTypeList().then(res => {
				this.tidArr = res.data;
			})
		},
	}

该处使用的url网络请求的数据。

---

总结

近期学习了脚手架，搭了个小项目，不懂的可以私信我，
一起进步啊！