A brief discussion on the issue of selecting values ​​in the Select drop-down box in Vue Element

I wrote a native select, which was deleted due to the display effect, and forgot to save the code. Now everyone shows that using the elementUI drop-down box to encapsulate a component for frequent calls in our project to reduce the amount of code.

html：

<el-select v-model="ite" placeholder="Please select" value-key="mateGroup"> 
   <el-option style="width: auto" :disabled="true" :value="null"> 
    <span style="float: left;font-weight: bold">Weekly </span> 
    &lt;span style="float: left; color: #8492a6; font-size: 13px; font-weight: bold"> Start date </span>    &lt;span style="float: right; color: #8492a6; font-size: 13px; font-weight: bold"> Deadline </span>   &lt;/el-option&gt; 
   &lt;el-option v-for="(item,index) in res" :key="index" :label="" v-bind:value="item"&gt; 
    &lt;span style="float: left; color: #8492a6; font-size: 13px"&gt;{{  }} &lt;/span&gt; 
    &lt;span style="float: left; color: #8492a6; font-size: 13px"&gt; {{  }}  &lt;/span&gt; 
    &lt;span style="float: right"&gt;{{  }}&lt;/span&gt; 
   &lt;/el-option&gt; 
  &lt;/el-select&gt; 

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) {
     = val
    ()
    ()
   }
  },
  methods: {
   getWeekYearly () {
    var _self = this
    ({
     url: '/standard/' + _self.orgCode + '/' + _self.farmOrg + '/getWeekly',
     type: 'GET',
     // contentType: 'application/json',
     dataType: 'json',
     success: function (res) {
      _self.res = res
     },
     fail: function (e) {
//       = false
      alert('Request failed')
      ('Query failed')
     }
    })
   },
   getL: function () {
    var _self = this
    _self.$emit('getL', _self.weekse)
   }
  }
 }
</script>

Here I will tell you what this page is done-

a. When the page first loaded, one of our methods was called through create. Send ajax. Get the value displayed in the drop-down box.

b. Monitor and obtain the selected value by binding a model to select. Here is the item

c. The first line of option here, we wrote a fixed table header. The following option is to immediately access the background, query the database, and obtain the drop-down list value after the test page is loaded through created: function().

d. The value value here. We bind it to this data object item.

Ps：Everyone here will definitely think that this is not very simple? But there is a pit here, that is, every value you choose will be displayed as the last one in the drop-down box, but the actual value is the object you choose... Let's take a look at whether it has occurred, this problem.

The reason for this problem is that when you choose to bind key, and value. There are duplicate values ​​in these data, which can't correspond to the data..

How do we need to solve this problem? When the Select value is an object type, a value-key needs to be provided as a unique identifier.

e. We listen to our select model through watch, and call a method to pass values ​​to the parent component in this listener. Provide our item to the parent component for use.

The above article briefly discusses the selection value of the Select drop-down box in Vue Element. This is all the content I share with you. I hope you can give you a reference and I hope you can support me more.