vue+element下拉列表默認(rèn)值問(wèn)題
vue element下拉列表默認(rèn)值
下拉列表中的三項(xiàng)條目deviceSNMPList,默認(rèn)選中:deviceSNMP:‘1’,
deviceSNMPList: [
{
key: '0',
label: 'v1'
},
{
key: '1',
label: 'v2c'
},
{
key: '3',
label: 'v3'
}
],
deviceSNMP:'1',el-form中el-select數(shù)據(jù)綁定deviceSNMP
<el-form :model="form" inline="true" ref="form" style="margin-bottom: -20px;margin-top:-20px">
<el-form-item style="margin-bottom: -10px; width: 100%" label="*SNMP版本:" :label-width="formLabelWidth"
prop="string">
<el-select clearable size='mini' v-model="deviceSNMP" placeholder="請(qǐng)選擇活動(dòng)區(qū)域" autocomplete="off"
style="width: 100%">
<el-option v-for="item in deviceSNMPList" :key="item.key" :label="item.label"
:value="item.key"></el-option>
</el-select>
</el-form-item>
<el-form>

elementUI 下拉框 默認(rèn)值問(wèn)題
<el-select
v-model="xialaValue"
placeholder="請(qǐng)輸入關(guān)聯(lián)公式"
>
<el-option
v-for="item in roleOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>data() {
return {
roleOptions:[
{
value:'1',
label:'選項(xiàng)一'
},
{
value:'2',
label:'選項(xiàng)二'
},
{
value:'3',
label:'選項(xiàng)三'
},
]
}
}要到達(dá)讓下拉框有默認(rèn)值,只需要讓v-model綁定的值等于 roleOptions數(shù)組里面的某一條value
例如
this.xialaValue='1'
就可以實(shí)現(xiàn) 下拉框默認(rèn)值為‘選項(xiàng)一’。
如果出現(xiàn)下拉菜單賦值不成功,可以檢查下v-model綁定的值和數(shù)組里面的value值,數(shù)據(jù)類型一不一樣
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
如何在 Vite 項(xiàng)目中自動(dòng)為每個(gè) Vue 文件導(dǎo)入 base.les
在Vite配置中通過(guò)添加css.preprocessorOptions實(shí)現(xiàn)自動(dòng)導(dǎo)入base.less,簡(jiǎn)化Vue組件的樣式設(shè)置,提高代碼的可維護(hù)性,感興趣的朋友跟隨小編一起看看吧2024-09-09
Vue Element前端應(yīng)用開(kāi)發(fā)之組織機(jī)構(gòu)和角色管理
本篇文章繼續(xù)深化Vue Element權(quán)限管理模塊管理的內(nèi)容,介紹組織機(jī)構(gòu)和角色管理模塊的處理,使得我們了解界面組件化模塊的開(kāi)發(fā)思路和做法,提高我們界面設(shè)計(jì)的技巧,并減少代碼的復(fù)雜性,提高界面代碼的可讀性,同時(shí)也是利用組件的復(fù)用管理。2021-05-05
Vue項(xiàng)目查看當(dāng)前使用的elementUI版本的方法
今天小編就為大家分享一篇Vue項(xiàng)目查看當(dāng)前使用的elementUI版本的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue車(chē)牌號(hào)校驗(yàn)和銀行校驗(yàn)實(shí)戰(zhàn)
這篇文章主要介紹了vue車(chē)牌號(hào)校驗(yàn)和銀行校驗(yàn)實(shí)戰(zhàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
vue.js中使用echarts實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)刷新功能
這篇文章主要介紹了vue.js中使用echarts實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)刷新功能,需要的朋友可以參考下2019-04-04
Vue監(jiān)聽(tīng)一個(gè)數(shù)組id是否與另一個(gè)數(shù)組id相同的方法
今天小編就為大家分享一篇Vue監(jiān)聽(tīng)一個(gè)數(shù)組id是否與另一個(gè)數(shù)組id相同的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vscode搭建vue環(huán)境完整圖文教程(適合新手小白)
Vue框架的優(yōu)秀設(shè)計(jì)和強(qiáng)大的生態(tài)系統(tǒng)成為了越來(lái)越多開(kāi)發(fā)者選擇Vue的原因,在實(shí)際項(xiàng)目過(guò)程中一個(gè)高效的開(kāi)發(fā)環(huán)境能夠大大提高開(kāi)發(fā)效率,這篇文章主要給大家介紹了關(guān)于vscode搭建vue環(huán)境的相關(guān)資料,需要的朋友可以參考下2023-10-10

