使用方法

element-ui select 选择器官网例子

v-model的值为当前被选中的el-option的 value 属性值，即:value= 绑定的值item.id

<template>
    <el-select v-model="value" placeholder="请选择">
        <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"></el-option>
    </el-select>
</template>
<script>
    export default {
        data() {
            return {
                options: [{
                    id: '选项1',
                    label: '黄金糕',
                    price: 15
                }, {
                    id: '选项2',
                    label: '双皮奶',
                    price: 7
                }, {
                    id: '选项3',
                    label: '蚵仔煎',
                    price: 24
                }, {
                    id: '选项4',
                    label: '龙须面',
                    price: 20
                }, {
                    id: '选项5',
                    label: '北京烤鸭',
                    price: 50
                }],
                value: ''
            }
       }
    }
</script>

问题描述

通常情况下，我们只需要获取列表某一项的一个属性值，所以这时v-model只需要一个属性值如item.id，但是，如果我们需要同时获取列表某一项的多个属性，那么让v-model直接绑定item就会来的简单方便很多 ，所以直接将代码修改如下

<template>
    <el-select v-model="value" placeholder="请选择">
        <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item"></el-option>
    </el-select>
</template>

将value的值直接绑定item，这样v-model就能拿到一整个对象，但是我们操作的时候会发现，第一次能够很好的选择，但是一旦我们想要更改第一次选择的结果，就会出现下图所示问题，选项没办法选中啦！

cannotSelect

解决方案

再次查看官网，发现漏看了一个很重要的信息！

如果 Select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识。

再次修改代码

<template>
    <el-select v-model="value" value-key="id" placeholder="请选择">
        <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item"></el-option>
    </el-select>
</template>

将value-key绑定选项的某一项的唯一属性，问题就解决啦~撒花❀~