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

更新時間：2023年05月11日 14:58:19 作者：July++

這篇文章主要介紹了Vue中select下拉框的默認選中項的三種情況解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue 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 選項內容寫在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 選項內容

通過接口去獲取但是接口里沒有默認選中項怎么辦呢？看代碼

<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>

vue中select默認選中下拉選項第一條（舉例iview AutoComplete組件）

html中

靜態(tài)

給對應option元素直接添加selected屬性

<select> 
	<option value="0">one</option> 
	<option value="1">two</option> 
	<option value="2" selected>three</option> 
</select>

動態(tài)

option加載完成后給對應元素添加selected屬性

$("option")[2].prop("selected","selected");

vue中

選中第一項同時并改變select綁定的value（正常業(yè)務）

<template>
	<select v-model="value"> 
		<option value="0">New York</option> 
		<option value="1">London</option>
		<option value="2">Sydney</option>
		<option value="3">Ottawa</option>
	</select>
</template>
export default {
	data () {
    	return {
    		value: '0'	
    	}
    }
}

可模糊匹配，select輸入模糊匹配，默認選中下拉選項中第一項，但select綁定的value不變，即下圖所示：

可模糊匹配，select輸入模糊匹配，默認選中下拉選項中第一項，但select綁定的value不變

我的做法是

1.輸入值改變時，監(jiān)聽change事件引起下拉選項的發(fā)生改變

2.判斷篩選后的下拉選項Dom元素中沒有選中項，為第一項New York添加選中樣式；若有選中項則不操作

3.監(jiān)聽回車事件，如此時有回車事件，判斷下拉選項Dom中第一項有選中樣式則將value的值變更為選項中第一項的值，即this.value = ‘New York’，并將下拉選項框隱藏

4.我的實際列子是使用iviewUI中的AutoComplete組件做的（簡單舉個例子，只提供參考）

<template>
  <div id="search-input-component">
    <AutoComplete
      v-model="value"
      type="text"
      @keydown.enter.native.prevent="enterEvent"
      @on-change="change"
    >
      <Option
        v-for="item in changeList"
        :value="item.value"
        :key="item.value"
      >
        {{item.name}}
      </Option>
    </AutoComplete>
  </div>
</template>
<script>
export default {
  data () {
    return {
      value: '', // AutoComplete綁定的值
      valueLists: [
        // { value: '選項值', name: '選項名' }
      ], // 全部拉選項列表
      changeList: [] // 實時模糊匹配的下拉選項列表
    }
  },
  created () {
    this.getAllList()
  },
  methods: {
    // 獲取所有下拉選項
    getAllList () {
      // ...Data
      this.valueLists = Data
      this.changeList = Data
    },
    // 輸入change事件
    change (val) {
      // 模糊匹配邏輯,重新生成下拉選項列表
      this.changeList = []
      this.valueLists.map(item => {
        if (item.toUpperCase().indexOf(val.toUpperCase()) !== -1) {
          this.changeList.push(item)
        }
      })
      this.$nextTick(() => {
        // 下拉框中所有選項的Dom
        const ele = document.querySelectorAll('#search-input-component .ivu-select-dropdown.ivu-auto-complete .ivu-select-dropdown-list .ivu-select-item')
        let hasFocus = false // 初始賦值沒有選中項
        for(let i=0; i < ele.length; i++) {
          // 判斷有選中項
          if (ele[i].className.indexOf('ivu-select-item-focus') > -1) {
            hasFocus = true
            break
          }
        }
        // 判斷沒有選中項，則選中第一項（添加選中樣式）
        if (!hasFocus && (ele[0].className.indexOf('ivu-select-item-focus') === -1)) {
          ele[0].classList += ' ivu-select-item-focus'
        }
      })
    },
    // 回車事件
    enterEvent (card, isUpdate) {
      const selectDom = document.querySelector('#search-input-component .ivu-select-dropdown.ivu-auto-complete')
      // 下拉選項有匹配到數(shù)據(jù) 并且 下拉選項沒有隱藏
      if (this.changeList.length && !selectDom.style.display) {
        // 下拉框中所有選項的Dom
        const items = document.querySelectorAll('#search-input-component .ivu-select-dropdown.ivu-auto-complete .ivu-select-dropdown-list .ivu-select-item')
        let hasFocus = false // 初始賦值沒有選中項
        for(let i=0; i < items.length; i++) {
          // 判斷有選中項
          if (items[i].className.indexOf('ivu-select-item-focus') > -1) {
            hasFocus = true
            break
          }
        }
        // 判斷沒有選中項，則選中第一項
        if (!hasFocus) {
          this.value = this.changeList[0].cardId
        }
        selectDom.style.display = 'none' // 隱藏下拉框
      }
    }
  }
}
</script>