element select 绑定一个对象{}

背景：

select组件的使用，适用广泛的基础单选 v-model 的值为当前被选中的 el-option 的 value 属性值。但是我们这里想绑定一个对象，一个el-option对应的对象。

<el-select
            v-model="state.form.modelA"
            value-key="pid"

</el-select>

如果下拉列表没有初始值，那么state.form.modelA=undifined

效果展示：

实现代码：

//核心代码
<el-formref="ruleForm":model="state.form"label-width="auto"class="form-box"><el-form-item label="是否是模版" prop="mould"><el-selectv-model="state.form.isModel"placeholder="请选择"@change="isModelChange"><el-option label="是模版" :value="1" /><el-option label="不是模版" :value="0" /></el-select></el-form-item><el-form-itemlabel="模版名称"prop="modelA"v-show="state.form.modelData.length > 0"><el-selectv-model="state.form.modelA"value-key="pid"placeholder="请选择"@change="modelAChange"><el-optionv-for="item in state.form.modelData":key="item.pid":label="item.name":value="item"/></el-select></el-form-item></el-form>

核心代码：

如果默认不选中一个下拉对象，那么：

 

如果不绑定value-key 下拉选择框正常的选择功能就会失效,图片如下：

 写到这儿，就实现了select下拉选择绑定一个对象。。。

以下是解释：点击跳转

官方文档：