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> ...
随机推荐
- [Error]ValueError: Object arrays cannot be loaded when allow_pickle=False
问题描述使用numpy的函数 numpy.load() 加载数据时报错: ValueError: Object arrays cannot be loaded when allow_pickle=Fa ...
- 【MySQL作业】SELECT 数据查询——美和易思select 选择列表应用习题
点击打开所使用到的数据库>>> 1.查询所有客户的地址和电话号码. SELECT address, phone FROM customer 2.查询所有商品的名称.种类和单价信息. ...
- MySQL入门安装,及环境配置,初始化教程
一.MySQL安装(win64) 免费的社区版下载地址:https://dev.mysql.com/downloads/mysql 接着会跳到这个页面 下载完后,我们将 zip 包解压到相应的目录,这 ...
- linux 设置开机自动启动应用
作为一个开发,项目现在一般都是部署在虚拟机上的linux,数据库也是按照在l虚拟机上的linux,一旦关机了,在开机程序都没打开,又要一个个去开,很麻烦,所以现在我现在使用supervisor去做一个 ...
- Unity——ShaderLab实现玻璃和镜子效果
在这一篇中会实现会介绍折射和反射,以及菲尼尔反射:并且实现镜子和玻璃效果: 这里和之前不同的地方在于取样的是一张CubeMap: demo里的cubemap使用的一样,相机所在位置拍出来的周围环境图: ...
- centos6.5-DNS搭建
在RHEL6.5中,系统光盘自带了BIND服务的安装文件 安装步骤 准备工作: Service iptables stop #关闭防火墙 Setenforce 0 关闭selinux ...
- angularJS中$digest already in progress报错解决方法
看到一个前端群里有人问,就查了下解决"$digest already in progress"最好的方式,就是不要使用$scope.$apply()或者$scope.$digest ...
- Python多环境管理神器(pyenv)
前面我们已经介绍了,python中两种最基础的虚拟环境管理工具,venv和virtualenv,其中virtualenv可以和virtualenvwrapper配合使用.详情请参考:https://w ...
- Python多环境管理神器(Anaconda)
为了解决python多版本共存,解决不同版本之间的依赖冲突,虚拟环境隔离等问题,我们前面介绍了venv.virtualenv.virtualenvwrapper.pyenv.pipenv等众多工具.下 ...
- RabbitMQ 中的分布式,普通 cluster 模式的构建
RabbitMQ 如何做分布式 前言 集群配置方案 cluster 普通模式 镜像模式 federation shovel 节点类型 RAM node Disk node 集群的搭建 1.局域网配置 ...