element-ui中Select 选择器value-key的使用

场景描述

很多时候我们都需要使用下拉框  Select 选择器。
在获取值的时候，通常只需要传递对应的id给后端就行了。
但是特殊情况，后端不想去查库，不仅需要我们id,还有name,code之类的。
这个时候前端通过id去查询对应的name,code
这样做会写循环，查询，非常的麻烦。
其实  Select 选择器为我们提供可一个 value-key这个属性，可以轻松解决这个问题

value-key获取当期项的全部数据

<template>
  <div>
	<!-- value-key 对应的需要是一个唯一标识，否者会出问题 -->
	<!--  :value="item" 这个时候v-model中的值就是一个对象了-->
      <el-select @change='changeHandler' value-key='value' v-model="valueObj"  placeholder="请选择">
        <el-option
        v-for="item in options"
        :label="item.label"
        :key="item.key"
        :value="item">
        </el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 搜索相关的数据
      options: [{
      	value: '101',
      	label: '苹果',
      	type:'shuiguo',
      	code:'001-102',
      }, {
      	value: '102',
      	label: '白菜',
      	type:'shucai',
      	code:'002-102'
      }],
     valueObj: {}
    }
  },
  
  methods: {
   changeHandler(){
   console.log('该项的所有值',this.valueObj)
  }
}

</script>

如何回填数据呢？

只要 valueObj 对象中的value值匹配上options数组中的某一项的value值。
就会自动回填。

 data () {
	return {
	options: [{
      	value: '101',
      	label: '苹果',
      	type:'shuiguo',
      	code:'001-102',
      }, {
      	value: '102',
      	label: '白菜',
      	type:'shucai',
      	code:'002-102'
      }],
     // 界面上会回填白菜
     valueObj: {
      	value: '102',
      	label: '白菜',
      	type:'shucai',
      	code:'002-102'
      }
   }
},

总结

Select 选择器通过 value-key映射一个唯一标识。
配合 el-option 的 :value="item" 这样就可以让 v-model中的值就是一个对象，
该对象有该项的全部数据