快捷導航

淺談Vue Element中Select下拉框選取值的問題

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

下面小編就為大家分享一篇淺談Vue Element中Select下拉框選取值的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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

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 調(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ù)中有重復值導致的，造成數(shù)據(jù)對應(yīng)不起..

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

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

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

您可能感興趣的文章: