溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時間：2020-10-25 13:42:23 來源：腳本之家 閱讀：225 作者：Pratise 欄目：web開發(fā)

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

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 調(diào)用了我們的一個方法。發(fā)送ajax.獲取到下拉框該顯示的值。

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

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

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

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

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

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

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

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

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手