之前寫了.一個原生的select的，因為展示效果原因，給刪除掉了，忘記保存代碼了，現在大家展示使用elementUI的下拉框封裝一個組件，供咱們項目中經常調用，減少代碼量。
html：
<el-select v-model="ite" placeholder="請選擇" value-key="mateGroup">
<el-option :disabled="true" :value="null">
<span >周次 </span>
<span > 開始日期 </span>
<span > 截止日期 </span>
</el-option>
<el-option v-for="(item,index) in res" :key="index" :label="item.mateGroup" v-bind:value="item">
<span >{{ item.mateGroup }} </span>
<span > {{ item.weekStartDate }} </span>
<span >{{ item.weekEndDate }}</span>
</el-option>
</el-select>
Js：
<script>
import jQuery from 'jquery'
export default {
props: ['orgCode', 'farmOrg'],
data () {
return {
res: [],
ite: '',
weekse: ''
}
},
created: function () {
var _self = this
_self.getWeekYearly()
},
watch: {
ite: function (val) {
this.weekse = val
console.log(this.weekse)
this.getL()
}
},
methods: {
getWeekYearly () {
var _self = this
jQuery.ajax({
url: '/standard/' + _self.orgCode + '/' + _self.farmOrg + '/getWeekly',
type: 'GET',
// contentType: 'application/json',
dataType: 'json',
success: function (res) {
_self.res = res
},
fail: function (e) {
// this.tableFlag = false
alert('請求失敗')
console.log('查詢失敗')
}
})
},
getL: function () {
var _self = this
_self.$emit('getL', _self.weekse)
}
}
}
</script>
下來我給大家說一下這個頁面都做了什么-
a、在頁面剛開始加載時候，通過create 調用了我們的一個方法。發送ajax.獲取到下拉框該顯示的值。
b、通過給select綁定一個model來監視和獲取選中后的值.這里是ite
c、此處第一行option，我們寫了一個固定表頭， 以下通過option是通過created: funtion() 試頁面加載后，立即訪問后臺，查詢數據庫，獲取的下拉列表值，進行顯示。
d、這里的value值.我們綁定成這條數據對象item.
Ps：這里大家肯定會想這不是很簡單么？但是這里有一個坑，就是你選取的每一個值都會在下拉框中，顯示成最后一個，但是實際value值是你選取的這個對象…看一看，是不是出現了，這個問題。
這個問題出現的原因是，在你option綁定key，和value時。該這些數據中有重復值導致的，造成數據對應不起..
這個問題我們需要怎么解決呢，Select值為對象類型時，需要提供一個 value-key 作為唯一性標識。
e、我們通過watch監聽咱們select的model，在這個監聽里面調用一個給父組件傳值的方法..將咱們的item提供給父組件使用。
以上這篇淺談Vue Element中Select下拉框選取值的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
