Vue+ElementUI實現從後臺動態填充下拉框的示例代碼

Posted on by

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 動態填充下拉框內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：