Vue+ElementUI实现从后台动态填充下拉框的⽰例代码
1、⾸先编写前端代码，将elementUI中的标签写到.vue界⾯中。
<el-select
v-model="id"
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 = ()
//做⼀下判断
if(selectResult){
//查出值之后对之前声明好的变量进⾏赋值
this.selectOptionsAll = selectResult
}else{
this.$message.info(
'没有可选择的下拉框'
)
}
} catch (err) {
this.$notify({
title: '初始化下拉框失败',
message: ssage,
type: 'warning',
showClose: false
})
elementui登录界面
} 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() {SelectOptions();}函数中调⽤，当加载界⾯时就会调⽤该函数。到此，实现了下拉框的动态填充实现。
到此这篇关于Vue+ElementUI实现从后台动态填充下拉框的⽰例代码的⽂章就介绍到这了，更多相关Vue ElementUI 动态填充
下拉框内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。