關(guān)于el-select組件設(shè)置默認(rèn)值的實(shí)現(xiàn)方式
el-select組件設(shè)置默認(rèn)值問題
最近寫項(xiàng)目的時候遇到將el-select組件設(shè)置默認(rèn)值需求,通過查閱資料發(fā)現(xiàn)很多是使用v-model來實(shí)現(xiàn)的,但是只用v-model可能會有一些小小的問題。
因此根據(jù)他們的進(jìn)行改變了一下
實(shí)現(xiàn)方式 el-select組件:
? ?<el-select v-model="templateValue" placeholder="請選擇模板" @change="selectTm"> ? ? <el-option ? ? ? v-for="item in templateData" ? ? ? :key="item.id" ? ? ? :label="item.print_name" ? ? ? :value="item.id"> ? ? </el-option> ? </el-select>
data屬性:
? ?templateIdentify:true, ? ?tmId:"", ? ?fileName:'沒有任何文件',//文件名
這里將templateValue的值賦值為數(shù)組的第一個內(nèi)容。其次在select中添加@change="selectTm"事件,這個事件會傳入用戶選擇的id,然后將這個id賦值給tmId
有的小伙伴會問,如果用戶沒有做出選擇,那么tmId就為空字符串了。并且選擇器會不會永遠(yuǎn)是數(shù)組的第一個內(nèi)容,不會的我們用v-model進(jìn)行綁定了,用戶選擇的內(nèi)容會實(shí)時顯示在選擇器上。因此看下面一段代碼
created(){ ?? ?templateValue:this.templateData[0].print_name, ?? ?this.init() }, methods:{ ?selectTm(currentValue) { ? ? ? this.tmId = currentValue; ? ? }, ?? ?init(){ ?? ??? ?if(this.templateValue.length>0){ ?? ??? ? ? ?this.tmId=this.templateData[0].id ?? ??? ? ?} ?? ??? ?} }
用來判斷用戶是否做出選擇了,如果沒有選擇,那么默認(rèn)的把templateData數(shù)組中的第一項(xiàng)的id賦值給tmId
總結(jié):其實(shí)就是將id用另一個變量保存起來了。
如何給el-select賦默認(rèn)值
如下圖所示:
比如select下拉框中的數(shù)據(jù)是動態(tài)返回的,如何賦默認(rèn)的值。
<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> data() { return { options: [{ value: '選項(xiàng)1', label: '黃金糕' }, { value: '選項(xiàng)2', label: '雙皮奶' }, { value: '選項(xiàng)3', label: '蚵仔煎' }, { value: '選項(xiàng)4', label: '龍須面' }, { value: '選項(xiàng)5', label: '北京烤鴨' }], value: '選項(xiàng)1',
注:
1.必須先給options賦值,再給綁定的value賦值才行,即:
- this.options=“后臺返回的值”
- this.value=“想要賦的值”
2.value-key作為 value 唯一標(biāo)識的鍵名,綁定值為對象類型時必填。如:
<el-select v-model="value" placeholder="請選擇" value-key="value"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item"> </el-option> </el-select>
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli+webpack項(xiàng)目打包到服務(wù)器后,ttf字體找不到的解決操作
這篇文章主要介紹了vue-cli+webpack項(xiàng)目打包到服務(wù)器后,ttf字體找不到的解決操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08vue watch監(jiān)聽數(shù)據(jù)變化的案例詳解
監(jiān)聽數(shù)據(jù)變化,在Vue中是通過偵聽器來實(shí)現(xiàn)的,你也可以將它理解為監(jiān)聽器,時刻監(jiān)聽某個數(shù)據(jù)的變化,本文將通過代碼示例為大家詳細(xì)的介紹一下vue watch如何監(jiān)聽數(shù)據(jù)變化,需要的朋友可以參考下2023-07-07Vue使用 onMounted 確保在組件掛載后執(zhí)行異步操作示例詳解
在 Vue.js 或其他類似框架中,使用 onMounted 是為了確保在組件掛載后執(zhí)行異步操作,這篇文章主要介紹了Vue使用onMounted確保在組件掛載后執(zhí)行異步操作,需要的朋友可以參考下2023-06-06Vue2.0基于vue-cli+webpack Vuex的用法(實(shí)例講解)
下面小編就為大家?guī)硪黄猇ue2.0基于vue-cli+webpack Vuex的用法(實(shí)例講解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09使用Vue開發(fā)一個實(shí)時性時間轉(zhuǎn)換指令
我們就來實(shí)現(xiàn)這樣一個Vue自定義指令v-time,將表達(dá)式傳入的時間戳實(shí)時轉(zhuǎn)換為相對時間。下面小編給大家?guī)砹耸褂肰ue開發(fā)一個實(shí)時性時間轉(zhuǎn)換指令,需要的朋友參考下吧2018-01-01