vue+element下拉列表默認(rè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)值問題
<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配置中通過添加css.preprocessorOptions實(shí)現(xiàn)自動(dòng)導(dǎo)入base.less,簡化Vue組件的樣式設(shè)置,提高代碼的可維護(hù)性,感興趣的朋友跟隨小編一起看看吧2024-09-09Vue Element前端應(yīng)用開發(fā)之組織機(jī)構(gòu)和角色管理
本篇文章繼續(xù)深化Vue Element權(quán)限管理模塊管理的內(nèi)容,介紹組織機(jī)構(gòu)和角色管理模塊的處理,使得我們了解界面組件化模塊的開發(fā)思路和做法,提高我們界面設(shè)計(jì)的技巧,并減少代碼的復(fù)雜性,提高界面代碼的可讀性,同時(shí)也是利用組件的復(fù)用管理。2021-05-05Vue項(xiàng)目查看當(dāng)前使用的elementUI版本的方法
今天小編就為大家分享一篇Vue項(xiàng)目查看當(dāng)前使用的elementUI版本的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue車牌號(hào)校驗(yàn)和銀行校驗(yàn)實(shí)戰(zhàn)
這篇文章主要介紹了vue車牌號(hào)校驗(yàn)和銀行校驗(yàn)實(shí)戰(zhàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01vue.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-04Vue監(jiān)聽一個(gè)數(shù)組id是否與另一個(gè)數(shù)組id相同的方法
今天小編就為大家分享一篇Vue監(jiān)聽一個(gè)數(shù)組id是否與另一個(gè)數(shù)組id相同的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09vscode搭建vue環(huán)境完整圖文教程(適合新手小白)
Vue框架的優(yōu)秀設(shè)計(jì)和強(qiáng)大的生態(tài)系統(tǒng)成為了越來越多開發(fā)者選擇Vue的原因,在實(shí)際項(xiàng)目過程中一個(gè)高效的開發(fā)環(huán)境能夠大大提高開發(fā)效率,這篇文章主要給大家介紹了關(guān)于vscode搭建vue環(huán)境的相關(guān)資料,需要的朋友可以參考下2023-10-10