el-select 绑定对象类型的值,以及进行数据的回显_el-select 赋值对象回显

注意

在回显的时候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
            }
        }
    }
}