之前寫了.一個原生的select的,因爲展示效果原因,給刪除掉了,忘記保存代碼了,現在大家展示使用elementUI的下拉框封裝一個組件,供咱們項目中經常調用,減少代碼量.
html
<el-select v-model="ite" placeholder="請選擇" value-key="mateGroup">
<el-option style="width: auto" :disabled="true" :value="null">
<span style="float: left;font-weight: bold">周次 </span>
<span style="float: left; color: #8492a6; font-size: 13px; font-weight: bold"> 開始日期 </span>
<span style="float: right; color: #8492a6; font-size: 13px; font-weight: bold"> 截止日期 </span>
</el-option>
<el-option v-for="(item,index) in res" :key="index" :label="item.mateGroup" v-bind:value="item">
<span style="float: left; color: #8492a6; font-size: 13px">{{ item.mateGroup }} </span>
<span style="float: left; color: #8492a6; font-size: 13px"> {{ item.weekStartDate }} </span>
<span style="float: right">{{ 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提供給父組件使用.