Vue+ElementUI实现从后台动态填充下拉框的示例代码

Tallulah ·

更新时间:2024-09-20

· 806 次阅读

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 示例下拉框动态

1024 个赞