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

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

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

el-select默認選擇第一個或者第二個

框架用的是若依，字典

這是el-select

這是data里面定義的直接寫個 1 就是第一個

這是頁面

select下拉框的默認選中項的三種情況

在Vue中使用select下拉框主要靠的是 v-model 來綁定選項 option 的 value 值。

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

select默認選中項

關于select選項的寫法有三種情況

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

我們直接上代碼：

第一種

是option的值寫在HTML中

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

第二種

是option 選項內(nèi)容寫在JS中的，通過v-for來遍歷的：

<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:'請選擇'
                  },
                  {
                      statusId:'1',
                      statusVal:'未處理'
                  },
                  {
                      statusId:'2',
                      statusVal:'處理中'
                  },
                  {
                      statusId:'3',
                      statusVal:'處理完成'
                  },
              ],
              selected:''
       },
       created(){
           // 在組件創(chuàng)建之后，把默認選中項的value值賦給綁定的屬性
           //如果沒有這句代碼，select中初始化會是空白的，默認選中就無法實現(xiàn)
         this.selected = this.statusArr[0].statusId;
       }
   })
    </script>

第三種

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

<body>
    <div id="app">
     <select name="status" id="status" v-model="selected">
         <!-- 由于從接口獲取的select的下拉值沒有‘請選擇'，所以我們要自己寫一個 -->
        <option value="">請選擇</option> 
        <option :value="item.statusId" v-for="(item,index) in statusArr">{{item.statusVal}}</option>
     </select>
   </div>
</body>
<script>
   new Vue({
       el:'#app',
       data:{
              statusArr:[], //用來接收從接口里獲取出來的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; //將獲取出來的數(shù)據(jù)賦給定義的數(shù)組 以便于去循環(huán)遍歷
              }
           }) 
       },
       created(){
         this.getSelectInfo();
       }
   })
    </script>

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

您可能感興趣的文章: