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