之前寫了.一個原生的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>
 

<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提供給父元件使用.