vue-element的select下拉框賦值實例
更新時間：2022年03月31日 15:03:22 作者：前端王小婷
這篇文章主要介紹了vue-element的select下拉框賦值實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue-element的select下拉框賦值
當返回值是對象數(shù)組的時候
<template>
<el-select v-model="value" placeholder="請選擇">
<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: '選項1',
label: '黃金糕'
}, {
value: '選項2',
label: '雙皮奶'
}, {
value: '選項3',
label: '蚵仔煎'
}, {
value: '選項4',
label: '龍須面'
}, {
value: '選項5',
label: '北京烤鴨'
}],
value: ''
}
}
}
</script>
當返回值是字符串數(shù)組的時候
<template>
<el-select v-model="value" placeholder="請選擇">
<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="請選擇" 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)過這個樣的賦值之后,在頁面選擇下拉數(shù)據(jù)的時候無法選中(其實已經(jīng)更改，只是頁面沒有實時刷新)
在change事件里用這個方法
?selectChange(){
? ? this.$forceUpdate()
? },以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue(element ui)中操作row參數(shù)的使用方式
這篇文章主要介紹了Vue(element ui)中操作row參數(shù)的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了Vue中自定義一個鈴聲提示音組件的實現(xiàn)以及使用方法，文中的示例代碼講解詳細，對我們學習Vue有一定幫助，需要的可以參考一下2022-01-01
組件是vue.js最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數(shù)據(jù)無法相互進行直接的引用，所以組件間的相互通信是非常重要的2023-01-01
這篇文章主要介紹了VUE 自定義組件模板的方法,結(jié)合實例形式詳細分析了vue.js自定義組件模板的相關步驟與操作技巧,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了vue 單頁應用和多頁應用的優(yōu)劣，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-10-10
本文探討了Vue項目中缺少明顯入口文件的原因,并提供了解決方案,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-11-11
這篇文章主要介紹了Vue解析剪切板圖片并實現(xiàn)發(fā)送功能,本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
這篇文章主要為大家介紹了vue開發(fā)設計分支切換與cleanup實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
el-table?選中行與復選框相互聯(lián)動的實現(xiàn)步驟
這篇文章主要介紹了el-table?選中行與復選框相互聯(lián)動,分為兩步，第一步點擊行時觸發(fā)復選框的選擇或取消，第二步點擊復選框時觸發(fā)相應行的變化，本文通過實例代碼給大家詳細講解，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue在項目中使用百度地圖，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03