Vue+ElementUI实现从后台动态填充下拉框的示例代码
短信预约 -IT技能 免费直播动态提醒
1、首先编写前端代码，将elementUI中的标签写到.vue界面中。
<el-select
v-model="xxxQuery.xxxid"
placeholder="请在下拉框中选择名称"
maxlength="255"
:disabled="false"
clearable>
<el-option
v-for="item in selectOptionsAll"
:key="item.indexId"
:label="item.indexName"
:value="item.indexName">
</el-option>
</el-select>2、在return中声明变量，该变量与"v-for"中的循环标签保持一致。
selectOptionsAll: []
3、编写函数，初始化数据。
//初始化下拉框中的选项
async getSelectOptions() {
try {
//定义一个变量用来接收从后台查出的数据
//下面的indexResources是之前引入好的service方法
const selectResult = await indexResources.get()
//做一下判断
if(selectResult){
//查出值之后对之前声明好的变量进行赋值
this.selectOptionsAll = selectResult
}else{
this.$message.info(
'没有可选择的下拉框'
)
}
} catch (err) {
this.$notify({
title: '初始化下拉框失败',
message: err.message,
type: 'warning',
showClose: false
})
} finally {
this.dialogLoading = false
}
}
4、掉用后台部分代码，后台代码如下。
controller层：
@GetMapping("/getList")
@ApiOperation(value = "查询全部数据")
public ReturnType<?> getList() {
List<DvIdxIndexDTO> list = xxxService.queryAllList();
return ReturnType.success(list );
}
注意，JS的函数已经在vue中的created() {this.getSelectOptions();}函数中调用，当加载界面时就会调用该函数。到此，实现了下拉框的动态填充实现。
到此这篇关于Vue+ElementUI实现从后台动态填充下拉框的示例代码的文章就介绍到这了,更多相关Vue ElementUI 动态填充下拉框内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
