快捷導(dǎo)航

淺談Vue Element中Select下拉框選取值的問(wèn)題

更新時(shí)間：2018年03月01日 16:38:05 作者：Pratise

下面小編就為大家分享一篇淺談Vue Element中Select下拉框選取值的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

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

html：

<el-select v-model="ite" placeholder="請(qǐng)選擇" 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"> 開(kāi)始日期 </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('請(qǐng)求失敗')
      console.log('查詢(xún)失敗')
     }
    })
   },
   getL: function () {
    var _self = this
    _self.$emit('getL', _self.weekse)
   }
  }
 }
</script>

下來(lái)我給大家說(shuō)一下這個(gè)頁(yè)面都做了什么-

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

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

c、此處第一行option，我們寫(xiě)了一個(gè)固定表頭，以下通過(guò)option是通過(guò)created: funtion() 試頁(yè)面加載后，立即訪(fǎng)問(wèn)后臺(tái)，查詢(xún)數(shù)據(jù)庫(kù)，獲取的下拉列表值，進(jìn)行顯示。

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

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

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

這個(gè)問(wèn)題我們需要怎么解決呢，Select值為對(duì)象類(lèi)型時(shí)，需要提供一個(gè) value-key 作為唯一性標(biāo)識(shí)。

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

以上這篇淺談Vue Element中Select下拉框選取值的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: