场景描述
很多时候我们都需要使用下拉框 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中的值就是一个对象，
该对象有该项的全部数据