vue實(shí)現(xiàn)el-select默認(rèn)選擇第一個(gè)或者第二個(gè)

更新時(shí)間：2022年09月02日 09:55:44 作者：菜鳥(niǎo)小碼農(nóng)007

這篇文章主要介紹了vue實(shí)現(xiàn)el-select默認(rèn)選擇第一個(gè)或者第二個(gè)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

el-select默認(rèn)選擇第一個(gè)或者第二個(gè)

框架用的是若依，字典

這是el-select

這是data里面定義的直接寫(xiě)個(gè) 1 就是第一個(gè)

這是頁(yè)面

select下拉框的默認(rèn)選中項(xiàng)的三種情況

在Vue中使用select下拉框主要靠的是 v-model 來(lái)綁定選項(xiàng) option 的 value 值。

select下拉框在界面的展示，我們都希望看到框中有一個(gè)值而不是空白，比如顯示 “請(qǐng)選擇” 或者 “全部” 的默認(rèn)值。先來(lái)看效果圖

select默認(rèn)選中項(xiàng)

關(guān)于select選項(xiàng)的寫(xiě)法有三種情況

①.寫(xiě)在HTML中
②.寫(xiě)在JS一個(gè)數(shù)組中
③.通過(guò)接口去獲取得到

我們直接上代碼：

第一種

是option的值寫(xiě)在HTML中

  <div id="app">
     <select name="status" id="status" v-model="selected">
         <option value="">請(qǐng)選擇</option>
         <option value="1">未處理</option>
         <option value="2">處理中</option>
          <option value="3">處理完成</option>
     </select>
   </div>
<script>
   new Vue({
       el:'#app',
       data:{
              selected:''  
              //默認(rèn)選中項(xiàng)的value值是什么  就給綁定的屬性什么值  這里默認(rèn)選中項(xiàng)請(qǐng)選擇的value值是空  我們就給綁定的屬性 select 一個(gè)空值
       },
   })
    </script>

第二種

是option 選項(xiàng)內(nèi)容寫(xiě)在JS中的，通過(guò)v-for來(lái)遍歷的：

<body>
    <div id="app">
     <select name="status" id="status" v-model="selected">
            <option :value="item.statusId" v-for="(item,index) in statusArr">{{item.statusVal}}</option>
     </select>
   </div>
</body>
<script>
   new Vue({
       el:'#app',
       data:{
              statusArr:[
                  {
                      statusId:'0',
                      statusVal:'請(qǐng)選擇'
                  },
                  {
                      statusId:'1',
                      statusVal:'未處理'
                  },
                  {
                      statusId:'2',
                      statusVal:'處理中'
                  },
                  {
                      statusId:'3',
                      statusVal:'處理完成'
                  },
              ],
              selected:''
       },
       created(){
           // 在組件創(chuàng)建之后，把默認(rèn)選中項(xiàng)的value值賦給綁定的屬性
           //如果沒(méi)有這句代碼，select中初始化會(huì)是空白的，默認(rèn)選中就無(wú)法實(shí)現(xiàn)
         this.selected = this.statusArr[0].statusId;
       }
   })
    </script>

第三種

是option 選項(xiàng)內(nèi)容通過(guò)接口去獲取但是接口里沒(méi)有默認(rèn)選中項(xiàng)怎么辦呢？看代碼

<body>
    <div id="app">
     <select name="status" id="status" v-model="selected">
         <!-- 由于從接口獲取的select的下拉值沒(méi)有‘請(qǐng)選擇'，所以我們要自己寫(xiě)一個(gè) -->
        <option value="">請(qǐng)選擇</option> 
        <option :value="item.statusId" v-for="(item,index) in statusArr">{{item.statusVal}}</option>
     </select>
   </div>
</body>
<script>
   new Vue({
       el:'#app',
       data:{
              statusArr:[], //用來(lái)接收從接口里獲取出來(lái)的select下拉框里的值
              selected:''
       },
       getSelectInfo(){
           var url = "../monitor_admin_front/device/status"; //接口地址
           axios.get(url)
           .then(response => {
              if(response.data.retCode == 0){
                 this.statusArr = response.data.data; //將獲取出來(lái)的數(shù)據(jù)賦給定義的數(shù)組 以便于去循環(huán)遍歷
              }
           }) 
       },
       created(){
         this.getSelectInfo();
       }
   })
    </script>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: