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-form
        ref="ruleForm"
        :model="state.form"
        label-width="auto"
        class="form-box"
      >
        <el-form-item label="是否是模版" prop="mould">
          <el-select
            v-model="state.form.isModel"
            placeholder="请选择"
            @change="isModelChange"
          >
            <el-option label="是模版" :value="1" />
            <el-option label="不是模版" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="模版名称"
          prop="modelA"
          v-show="state.form.modelData.length > 0"
        >
          <el-select
            v-model="state.form.modelA"
            value-key="pid"
            placeholder="请选择"
            @change="modelAChange"
          >
            <el-option
              v-for="item in state.form.modelData"
              :key="item.pid"
              :label="item.name"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-form>

核心代码：

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

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

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

以下是解释：点击跳转

官方文档：