?<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"中的循環(huán)標(biāo)簽保持一致。

selectOptionsAll: []

3、編寫函數(shù)，初始化數(shù)據(jù)。

    //初始化下拉框中的選項
    async getSelectOptions() {
      try {
           //定義一個變量用來接收從后臺查出的數(shù)據(jù)
           //下面的indexResources是之前引入好的service方法
         const selectResult = await indexResources.get()
         //做一下判斷
        if(selectResult){
         //查出值之后對之前聲明好的變量進(jìn)行賦值
          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層：

/**
     * 查詢?nèi)繑?shù)據(jù)返回list
     *
     * @param
     * @return list
     * @author wang
     */
    @GetMapping("/getList")
    @ApiOperation(value = "查詢?nèi)繑?shù)據(jù)")
    public ReturnType<?> getList() {
        List<DvIdxIndexDTO> list = xxxService.queryAllList();
        return ReturnType.success(list );
    }

注意，JS的函數(shù)已經(jīng)在vue中的created() {this.getSelectOptions();}函數(shù)中調(diào)用，當(dāng)加載界面時就會調(diào)用該函數(shù)。到此，實現(xiàn)了下拉框的動態(tài)填充實現(xiàn)。

到此這篇關(guān)于Vue+ElementUI實現(xiàn)從后臺動態(tài)填充下拉框的示例代碼的文章就介紹到這了,更多相關(guān)Vue ElementUI 動態(tài)填充下拉框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: