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、编写函数,初始化数据。
//初始化下拉框中的选项asyncgetSelectOptions(){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();}函数中调用,当加载界面时就会调用该函数。到此,实现了下拉框的动态填充实现。