亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

關(guān)于el-select組件設(shè)置默認(rèn)值的實(shí)現(xiàn)方式

 更新時間:2022年09月02日 08:49:33   作者:官方哈哈  
這篇文章主要介紹了關(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實(shí)現(xiàn)文件拖拽上傳功能

    基于Vue實(shí)現(xiàn)文件拖拽上傳功能

    文件拖拽上傳功能現(xiàn)在已經(jīng)隨處可見,大家應(yīng)該都用過了吧,那么它具體是怎么實(shí)現(xiàn)的大家有去了解過嗎,今天我們一起來實(shí)現(xiàn)一下這個功能,并封裝一個拖拽上傳組件吧
    2024-03-03
  • 在vue3中使用icon圖標(biāo)的三種方案

    在vue3中使用icon圖標(biāo)的三種方案

    這篇文章主要介紹了三種使用icon的方案,分別是element-icon、svg-icon、@iconify/vue,三種方案通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
    2023-07-07
  • vue-cli+webpack項(xiàng)目打包到服務(wù)器后,ttf字體找不到的解決操作

    vue-cli+webpack項(xiàng)目打包到服務(wù)器后,ttf字體找不到的解決操作

    這篇文章主要介紹了vue-cli+webpack項(xiàng)目打包到服務(wù)器后,ttf字體找不到的解決操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue watch監(jiān)聽數(shù)據(jù)變化的案例詳解

    vue 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-07
  • Vue使用 onMounted 確保在組件掛載后執(zhí)行異步操作示例詳解

    Vue使用 onMounted 確保在組件掛載后執(zhí)行異步操作示例詳解

    在 Vue.js 或其他類似框架中,使用 onMounted 是為了確保在組件掛載后執(zhí)行異步操作,這篇文章主要介紹了Vue使用onMounted確保在組件掛載后執(zhí)行異步操作,需要的朋友可以參考下
    2023-06-06
  • Vue2.0基于vue-cli+webpack Vuex的用法(實(shí)例講解)

    Vue2.0基于vue-cli+webpack Vuex的用法(實(shí)例講解)

    下面小編就為大家?guī)硪黄猇ue2.0基于vue-cli+webpack Vuex的用法(實(shí)例講解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • Vue指令之v-for的使用說明

    Vue指令之v-for的使用說明

    這篇文章主要介紹了Vue指令之v-for的使用說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue-Router安裝過程及原理詳細(xì)

    vue-Router安裝過程及原理詳細(xì)

    路由是網(wǎng)絡(luò)工程里面的專業(yè)術(shù)語,就是通過互聯(lián)把信息從源地址傳輸?shù)侥康牡刂返幕顒?。本質(zhì)上就是一種對應(yīng)關(guān)系。分為前端路由和后端路由。小編將再下面文章為大家做詳細(xì)介紹,感興趣的小伙伴請和小編一起來學(xué)習(xí)吧
    2021-09-09
  • vue實(shí)現(xiàn)文字滾動效果

    vue實(shí)現(xiàn)文字滾動效果

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文字滾動效果,公告滾動播放,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • 使用Vue開發(fā)一個實(shí)時性時間轉(zhuǎn)換指令

    使用Vue開發(fā)一個實(shí)時性時間轉(zhuǎn)換指令

    我們就來實(shí)現(xiàn)這樣一個Vue自定義指令v-time,將表達(dá)式傳入的時間戳實(shí)時轉(zhuǎn)換為相對時間。下面小編給大家?guī)砹耸褂肰ue開發(fā)一個實(shí)時性時間轉(zhuǎn)換指令,需要的朋友參考下吧
    2018-01-01

最新評論