快捷導(dǎo)航

vue+element下拉列表默認(rèn)值問題

更新時(shí)間：2023年06月08日 11:01:51 作者：guohongyanghy

這篇文章主要介紹了vue+element下拉列表默認(rèn)值問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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)文章

vue 全局引用公共的組件以及公共的JS文件問題
這篇文章主要介紹了vue 全局引用公共的組件以及公共的JS文件問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue + gojs 實(shí)現(xiàn)拖拽流程圖效果
最近一段時(shí)間在研究go.js,它是一款前端開發(fā)畫流程圖的一個(gè)插件，也是一個(gè)難點(diǎn)，要說(shuō)為什么是難點(diǎn)，首先，它是依賴畫布canvas知識(shí)開發(fā)，這篇文章主要介紹了vue + gojs 實(shí)現(xiàn)拖拽流程圖,需要的朋友可以參考下
2023-03-03
vuex數(shù)據(jù)持久化的兩種實(shí)現(xiàn)方案
在vuex的時(shí)候刷新以后里面存儲(chǔ)的state就會(huì)被瀏覽器釋放掉,因?yàn)槲覀兊膕tate都是存儲(chǔ)在內(nèi)存中的,所以一刷新頁(yè)面就會(huì)把state中的數(shù)據(jù)重置,這就涉及到vue數(shù)據(jù)持久化的問題,這篇文章主要給大家介紹了關(guān)于vuex數(shù)據(jù)持久化的兩種實(shí)現(xiàn)方案,需要的朋友可以參考下
2021-07-07
基于el-table封裝的可拖拽行列、選擇列組件的實(shí)現(xiàn)
本文主要介紹了基于el-table封裝的可拖拽行列、選擇列組件的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-12-12
vue中v-for加載本地靜態(tài)圖片方法
下面小編就為大家分享一篇vue中v-for加載本地靜態(tài)圖片方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
ruoyi-cloud通過(guò)bootstrap.yml文件設(shè)置多環(huán)境配置
本文主要介紹了在ruoyi-cloud框架中通過(guò)bootstrap.yml及對(duì)應(yīng)環(huán)境配置文件實(shí)現(xiàn)多環(huán)境部署的方法,具有一定的參考價(jià)值,感興趣的可以了解一下
2025-09-09
vue項(xiàng)目中更改名字和圖標(biāo)的簡(jiǎn)單實(shí)現(xiàn)步驟
今天在寫vue項(xiàng)目時(shí)碰到的問題是怎么修改vue的網(wǎng)頁(yè)圖標(biāo),所以下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中更改名字和圖標(biāo)的簡(jiǎn)單實(shí)現(xiàn),文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
vue :style設(shè)置背景圖片方式backgroundImage
這篇文章主要介紹了vue :style設(shè)置背景圖片方式backgroundImage,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue項(xiàng)目實(shí)現(xiàn)左滑刪除功能(完整代碼)
最近在開發(fā)移動(dòng)端項(xiàng)目，通過(guò)向左滑動(dòng)出現(xiàn)刪除按鈕，點(diǎn)擊即可刪除，怎么實(shí)現(xiàn)這個(gè)功能呢，接下來(lái)小編給大家?guī)?lái)實(shí)例代碼幫助大家學(xué)習(xí)vue項(xiàng)目實(shí)現(xiàn)左滑刪除功能，感興趣的朋友跟隨小編一起看看吧
2021-05-05
vue 3 中watch 和watchEffect 的新用法
本篇文章主要通過(guò) Options API 和 Composition API 對(duì)比 watch 的使用方法，讓大家快速掌握 vue3 中 watch 新用法,需要的朋友可以參考一下哦，希望對(duì)大家有所幫助
2021-11-11