element-ui 使用 Select 组件给 value 属性绑定对象类型

问题描述:当 value 属性绑定的是对象类型时,回显数据是,下拉框选项都是高亮选择样式,同时切换选项时,绑定的 v-model 视图没有对应改变。
1.value 绑定的是对象时,在 el-select 添加 value-key="id"属性,el-option中添加 :key="item.id" 属性,其绑定的 id 必须具有唯一性。
2.value-key 的值与 key 绑定的属性值对应。
- <el-form-item
- label="货物信息"
- prop="goodsInfo"
- >
- <el-select
- v-model="baseForm.goodsInfo"
- placeholder="请选择"
- value-key="itemName"
- @change="changeGoodsInfo"
- >
- <el-option
- v-for="item in goodsCategoryData"
- :key="item.itemName"
- :label="item.itemName"
- :value="item"
- />
- </el-select>
- </el-form-item>
我们如何强制更新视图呢?下拉选择中添加 change 事件获取选中值,使用 Vue 2.x 版本的 vm.$set 进行更新视图。
- changeGoodsInfo (value) {
- this.$set(this.baseForm, 'goodsInfo', value)
- }
element-ui 使用 Select 组件给 value 属性绑定对象类型的更多相关文章
- vue+element ui中select组件选择失效问题原因与解决方法
codejing 2020-07-10 09:13:31 652 收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- 使用 Element UI Select 组件的 value-key 属性,让绑定值可以为一个对象
EsunR 2019-11-07 12:14:42 12264 收藏 6 分类专栏: Vue 文章标签: element-ui 版权 当我们使用 Elemet UI 的选择组件进行多选时,Sele ...
- vue问题三:element ui的upload组件上传图片成功和移除事件
element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...
- Vue+element UI实现分页组件
介绍 这是一个是基于element-UI的分页组件基础上,进行了二次封装的分页组件,在展示数据时,该分页组件采用了每显示一页数据,只请求当前页面的数据的请求策略,从而避免了一次性将数据全部请求所造成的 ...
- vue+element UI 使用select元素动态的从后台获取到
VUE select元素动态的从后台获取到 <el-form-item label="选择店铺"> <el-select v-model="value& ...
- element UI 验证select 下拉问题
解决方式: 添加了type类型.
- element ui 弹出组件的遮罩层在弹出层的上面的解决方法
<el-dialog title="收货地址" :visible.sync="dialogFormVisible" :modal-append-to-bo ...
- vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...
随机推荐
- Golang项目的配置管理——Viper简易入门配置
Golang项目的配置管理--Viper简易入门配置 What is Viper? From:https://github.com/spf13/viper Viper is a complete co ...
- [AllError错误填坑大全]Jsoncpp logicError
在将Json::Value添加元素子项的时候,不要与(key,Value)的形式共有.容易形成逻辑错误. 举例如下: Json::Value output; Json::Value people; n ...
- YangTools从YANG生成Java类(Maven)
1.说明 ODL提供了Yang Tools工具从YANG文件生成Java类, 本文介绍使用Maven插件的方式生成, 基于yang-maven-plugin这个插件. 2.创建Maven工程 Ecli ...
- 使用sudo执行命令提示command not found
笔记: 使用源码部署nginx的时候,使用sudo nginx提示command not found,但是直接使用nginx会导致权限问题: 这种情况应该是环境变量导致的,使用 env |grep P ...
- JS常见框架汇总
基础框架 Vue.js 官网地址 : http://cn.vuejs.org/ 官方简介 : Vue.js 是一套用于构建用户界面的渐进式框架. 框架类型 : 前端项目级框架 适用平台 : 通用 仓库 ...
- Oracle 查询NULL字段/空字符串
简单记录一下: 工作中需要查询某个字段值为空的数据, 最开始查询的时候按照以前的思路 : 1.where 字段名=NULL,点击F8,未查到结果: 2.where 字段名='',点击F8,未查到结果: ...
- Oracle:使用PL-SQL登录时报ORA-12541:无监听程序的解决办法
背景: 在自己公司安装的Oracle,当时Oracle的监听地址都是写的公司的地址 后来由于项目需要,办公地点转移到了客户处, 大概有半年没有以sys用户登录数据库了. 最近在上下班途中学习Djang ...
- nginx高并发配置详解
https://www.cnblogs.com/liqiu/p/3152206.html 1. worker_processes 8; nginx 进程数,建议按照cpu 数目来指定,一般为它的倍数 ...
- 物理机异常断电,linux虚拟机系统磁盘mount失败,导致无法启动; kubectl 连接失败
虚拟机 CentOS 7 挂载文件系统失败 上周五下班前没有关闭虚拟机和物理机, 今天周一开了虚拟机之后,发现操作系统启动失败. 原因跟 这篇文章描述的一模一样. 解决操作系统的文件系统挂载的问题之后 ...
- Echart可视化学习(八)
文档的源代码地址,需要的下载就可以了(访问密码:7567) https://url56.ctfile.com/f/34653256-527823386-04154f 正文: 新增需求 点击 2020年 ...