注意
在回显的时候v-model绑定的值也必须是对象 并且对象中的属性必须包含 value-key绑定的值。
关键属性:value-key
<template>
<div class="container">
<el-select value-key="id" @change="selectChange" filterable clearable v-model="userInfo" placeholder="请选择">
<el-option v-for="item in options" :key="item.id" :label="item.label" :value="item">
</el-option>
</el-select>
<el-button type="primary" class="button" size="small" @click="Echo">回显</el-button>
</div>
</template>
<script>
export default {
data() {
return {
options: [{
id: 0,
label: '小红'
}, {
id: 1,
label: '小明'
}, {
id: 2,
label: '小张'
}],
userInfo: {},
// 模拟后台接口返回数据
resultUserInfo: {
id: 1
}
}
},
methods: {
// 下拉选值改变事件
selectChange() {
// 打印选中的对象数据
console.log(this.userInfo.id + '====' + this.userInfo.label)
},
// 回显方法
Echo() {
// 获取详情信息时, 给userInfo对象赋值进行回显操作
this.userInfo = {
id: this.resultUserInfo.id
}
}
}
}