vue-element的select下拉框賦值實(shí)例

更新時(shí)間：2022年03月31日 15:03:22 作者：前端王小婷

這篇文章主要介紹了vue-element的select下拉框賦值實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue-element的select下拉框賦值

當(dāng)返回值是對(duì)象數(shù)組的時(shí)候

<template>
  <el-select v-model="value" placeholder="請(qǐng)選擇">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
<script>
  export default {
    data() {
      return {
        options: [{
          value: '選項(xiàng)1',
          label: '黃金糕'
        }, {
          value: '選項(xiàng)2',
          label: '雙皮奶'
        }, {
          value: '選項(xiàng)3',
          label: '蚵仔煎'
        }, {
          value: '選項(xiàng)4',
          label: '龍須面'
        }, {
          value: '選項(xiàng)5',
          label: '北京烤鴨'
        }],
        value: ''
      }
    }
  }
</script>

當(dāng)返回值是字符串?dāng)?shù)組的時(shí)候

<template>
  <el-select v-model="value" placeholder="請(qǐng)選擇">
    <el-option
      v-for="item in options"
      :key="item"
      :value="item">
    </el-option>
  </el-select>
</template>
<script>
  export default {
    data() {
      return {
        options: [
          '黃金',
          '白銀',
          '鉑金',
          '鉆石',
        ],
        value: ''
      }
    }
  }
</script>

vue+elementUi select框賦值后無法選值

body結(jié)構(gòu)

<el-form-item label="商品種類" class="FormInputClass">
? <el-select v-model="adminSaveParam.prodClass" clearable placeholder="請(qǐng)選擇" size="mini" class="formInput" @change="selectChange">
? ? <el-option
? ? ? v-for="item in prodClass"
? ? ? :key="item.value"
? ? ? :label="item.label"
? ? ? :value="item.value">
? ? </el-option>
? </el-select>
</el-form-item>

賦值

if (supplier.isVmi === "Y") {
? ? ? ? ? ? ? this.adminSaveParam.prodClass = "VMI";
? ? ? ? ? ? } else if (supplier.isVmi === "N") {
? ? ? ? ? ? ? this.adminSaveParam.prodClass = "physical";
? ? ? ? ? ? }
? ? ? ? ? }

經(jīng)過這個(gè)樣的賦值之后,在頁面選擇下拉數(shù)據(jù)的時(shí)候無法選中(其實(shí)已經(jīng)更改，只是頁面沒有實(shí)時(shí)刷新)

在change事件里用這個(gè)方法

?selectChange(){
? ? this.$forceUpdate()
? },

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue(element ui)中操作row參數(shù)的使用方式
這篇文章主要介紹了Vue(element ui)中操作row參數(shù)的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-04-04
Vue自定義鈴聲提示音組件的實(shí)現(xiàn)
這篇文章主要介紹了Vue中自定義一個(gè)鈴聲提示音組件的實(shí)現(xiàn)以及使用方法，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定幫助，需要的可以參考一下
2022-01-01
Vue組件間通信的實(shí)現(xiàn)方法講解
組件是vue.js最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無法相互進(jìn)行直接的引用，所以組件間的相互通信是非常重要的
2023-01-01
VUE 自定義組件模板的方法詳解
這篇文章主要介紹了VUE 自定義組件模板的方法,結(jié)合實(shí)例形式詳細(xì)分析了vue.js自定義組件模板的相關(guān)步驟與操作技巧,需要的朋友可以參考下
2019-08-08
vue 單頁應(yīng)用和多頁應(yīng)用的優(yōu)劣
這篇文章主要介紹了vue 單頁應(yīng)用和多頁應(yīng)用的優(yōu)劣，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-10-10
Vue項(xiàng)目中缺少明顯入口文件的原因及解決策略
本文探討了Vue項(xiàng)目中缺少明顯入口文件的原因,并提供了解決方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-11-11
Vue解析剪切板圖片并實(shí)現(xiàn)發(fā)送功能
這篇文章主要介紹了Vue解析剪切板圖片并實(shí)現(xiàn)發(fā)送功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-02-02
vue開發(fā)設(shè)計(jì)分支切換與cleanup實(shí)例詳解
這篇文章主要為大家介紹了vue開發(fā)設(shè)計(jì)分支切換與cleanup實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
el-table?選中行與復(fù)選框相互聯(lián)動(dòng)的實(shí)現(xiàn)步驟
這篇文章主要介紹了el-table?選中行與復(fù)選框相互聯(lián)動(dòng),分為兩步，第一步點(diǎn)擊行時(shí)觸發(fā)復(fù)選框的選擇或取消，第二步點(diǎn)擊復(fù)選框時(shí)觸發(fā)相應(yīng)行的變化，本文通過實(shí)例代碼給大家詳細(xì)講解，需要的朋友可以參考下
2022-10-10
詳解vue在項(xiàng)目中使用百度地圖
這篇文章主要介紹了vue在項(xiàng)目中使用百度地圖，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03