select 绑定一个对象

背景：

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

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

效果展示：

 

实现代码：

//核心代码
<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下拉选择绑定一个对象。。。

以下是解释：点击跳转

官方文档：

原文地址：https://blog.csdn.net/weixin_45024453/article/details/145134728

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！