Vue+ElementUI实现从后台动态填充下拉框的示例代码
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层:
/** * 查询全部数据返回list * * @param * @return list * @author wang */ @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 动态填充下拉框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue结合el-dialog封装自己的confirm二次确认弹窗方式
这篇文章主要介绍了vue结合el-dialog封装自己的confirm二次确认弹窗方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-08-08vue-music 使用better-scroll遇到轮播图不能自动轮播问题
根据vue-music视频中slider组建的使用,当安装新版本的better-scroll,轮播组件,不能正常轮播。如何解决这个问题呢,下面小编给大家带来了vue-music 使用better-scroll遇到轮播图不能自动轮播问题,感兴趣的朋友一起看看吧2018-12-12
最新评论