之前寫了.一個原生的select的，因為展示效果原因，給刪除掉了，忘記保存代碼了，現(xiàn)在大家展示使用elementUI的下拉框封裝一個組件，供咱們項目中經(jīng)常調(diào)用，減少代碼量。

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比新興網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式新興網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋新興地區(qū)。費用合理售后完善，十載實體公司更值得信賴。

html：

 
    
    周次  
     開始日期  
     截止日期  
    
    
    {{ item.mateGroup }}  
     {{ item.weekStartDate }}   
    {{ item.weekEndDate }} 
    
   

Js：

下來我給大家說一下這個頁面都做了什么-

a、在頁面剛開始加載時候，通過create 調(diào)用了我們的一個方法。發(fā)送ajax.獲取到下拉框該顯示的值。

b、通過給select綁定一個model來監(jiān)視和獲取選中后的值.這里是ite

c、此處第一行option，我們寫了一個固定表頭， 以下通過option是通過created: funtion() 試頁面加載后，立即訪問后臺，查詢數(shù)據(jù)庫，獲取的下拉列表值，進行顯示。

d、這里的value值.我們綁定成這條數(shù)據(jù)對象item.

Ps：這里大家肯定會想這不是很簡單么？但是這里有一個坑，就是你選取的每一個值都會在下拉框中，顯示成最后一個，但是實際value值是你選取的這個對象…看一看，是不是出現(xiàn)了，這個問題。

這個問題出現(xiàn)的原因是，在你option綁定key，和value時。該這些數(shù)據(jù)中有重復(fù)值導致的，造成數(shù)據(jù)對應(yīng)不起..

這個問題我們需要怎么解決呢，Select值為對象類型時，需要提供一個 value-key 作為唯一性標識。

e、我們通過watch監(jiān)聽咱們select的model，在這個監(jiān)聽里面調(diào)用一個給父組件傳值的方法..將咱們的item提供給父組件使用。

以上這篇淺談Vue Element中Select下拉框選取值的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。