Vue+Element ui中表单常用下拉列表
情景:表单中会出现使用下拉列表,下拉列表是通过查询字典表中,下面就记录一下。1.form表单<!-- 只贴出item部分 --><el-form-item label="出产国别" prop="countryType"><el-select v-model="form.countryType" placeholder="请选择出产国别">...
·
情景:表单中会出现使用下拉列表,下拉列表是通过查询字典表中,下面就记录一下。
1.form表单
<!-- 只贴出item部分 -->
<el-form-item label="出产国别" prop="countryType">
<el-select v-model="form.countryType" placeholder="请选择出产国别">
<el-option v-for="item in countryList" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
2.data() {return {}}的return定义countryList类型
return {
countryList: [] //定义数组
}
3.在data(){methods:{}}中写请求,返回所需要的countryList列表
methods:{
//这个方法我这边是,一加载页面就会调用此方法
doGetDicts() {
if (this.dialog) {
getDicts()
.then(res => {
this.countryList= res.data.countryList;//把请求返回的列表,赋值给之前定义的
})
.catch(err => {
this.loading = false;
console.log(err.response.data.message);
});
}
}
}
4.效果图:
下拉列表的实现,最核心的就这三步啦。
ok 这次就到这里啦
更多推荐
已为社区贡献3条内容
所有评论(0)