vue elementUI select下拉框如何設(shè)置默認(rèn)值
vue elementUI select下拉框設(shè)置默認(rèn)值
關(guān)于element select框默認(rèn)值賦值不成功問(wèn)題，注意兩點(diǎn)：
v-model里面的數(shù)據(jù)和遍歷出來(lái)value值數(shù)據(jù)類型不一樣。?。。?！
（例：item.provinces類型是number，province類型是String。類型不一樣導(dǎo)致賦值不成功）
遍歷數(shù)據(jù)和賦值的先后順序，必須保證數(shù)據(jù)先遍歷后賦值。?。?！
要為select下拉框設(shè)定默認(rèn)值，只需要把 v-model 綁定的值和你想要選中 option 的 value 值設(shè)置一樣即可。
下面上代碼：
html部分代碼：
<el-select v-model="valuetype" @change="changetype">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>export default {
data() {
return {
options: [
{
value: 'all',
label: '全部'
},
{
value: 'model',
label: '型號(hào)'
},
{
value: 'machine',
label: '機(jī)器'
}
],
valuetype: 'all',
};
},
}
vue element-ui select 多選默認(rèn)值
編輯需要設(shè)置默認(rèn)值
<div class="add_item active">
<div class="add_name"> 參與者：</div>
<div class="add_input">
<el-select v-model="edituser_ids" multiple filterable placeholder="請(qǐng)選擇">
<el-option v-for="item in addOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
</div>接口返回的格式是1,2這樣的字符串 需要轉(zhuǎn)換為數(shù)組格式 但是轉(zhuǎn)換為數(shù)組里的值還是字符串格式 select默認(rèn)以為是顯示的內(nèi)容
解決方法
this.editmain_user_ids = res.data.data.main_user_ids.split(',').map(Number);總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
elementUI select組件使用及注意事項(xiàng)詳解
這篇文章主要介紹了elementUI select組件使用及注意事項(xiàng)詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
vue項(xiàng)目之?dāng)?shù)量占比進(jìn)度條實(shí)現(xiàn)方式
這篇文章主要介紹了vue項(xiàng)目之?dāng)?shù)量占比進(jìn)度條實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue數(shù)據(jù)改變但頁(yè)面沒(méi)有變的幾種情況及解決方法
如果,你發(fā)現(xiàn)自己需要在Vue中做一次強(qiáng)制更新,99.99%的情況,是你在某個(gè)地方做錯(cuò)了事,所以本文給大家介紹了Vue數(shù)據(jù)改變但頁(yè)面沒(méi)有變的幾種情況及解決方法,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-11-11
Vue實(shí)現(xiàn)頁(yè)面添加滿屏水印和去除水印功能
在一些特殊的應(yīng)用場(chǎng)景中,可能需要在網(wǎng)頁(yè)上添加水印以保護(hù)版權(quán)或標(biāo)識(shí)信息,本文將介紹如何在Vue項(xiàng)目中添加滿屏水印并實(shí)現(xiàn)去除水印的功能,文中通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-07-07
基于iview-admin實(shí)現(xiàn)動(dòng)態(tài)路由的示例代碼
這篇文章主要介紹了基于iview-admin實(shí)現(xiàn)動(dòng)態(tài)路由的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue實(shí)現(xiàn)搜索關(guān)鍵詞高亮的詳細(xì)教程
這篇文章主要為大家介紹了vue實(shí)現(xiàn)搜索關(guān)鍵詞高亮的詳細(xì)教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue video和vue-video-player實(shí)現(xiàn)視頻鋪滿教程
這篇文章主要介紹了vue video和vue-video-player實(shí)現(xiàn)視頻鋪滿教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
解決Idea、WebStorm下使用Vue cli腳手架項(xiàng)目無(wú)法使用Webpack別名的問(wèn)題
這篇文章主要介紹了解決Idea、WebStorm下使用Vue cli腳手架項(xiàng)目無(wú)法使用Webpack別名的問(wèn)題,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了如何實(shí)現(xiàn)無(wú)感刷新token，當(dāng)token過(guò)期的時(shí)候，刷新token,前端需要做到無(wú)感刷新token,即刷token時(shí)要做到用戶無(wú)感知，避免頻繁登錄。下面我們大家一起進(jìn)入文章看看實(shí)現(xiàn)思路即詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
vue.js+Element實(shí)現(xiàn)表格里的增刪改查
本篇文章主要介紹了vue.js+Element實(shí)現(xiàn)增刪改查，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-01-01