element 下拉框常见问题-白红宇的个人博客

element 下拉框常见问题

发布日期：2021-05-07 08:59:27 浏览次数：23 分类：原创文章

本文共 1842 字，大约阅读时间需要 6 分钟。

基本用法

<body>	<div id="app">		<el-select v-model="value" placeholder="请选择">			<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">			</el-option>		</el-select>	</div></body><script>	new Vue({   		el: '#app',		data: {   			options: [{   				value: 1,				label: '黄金糕',			}, {   				value: 2,				label: '双皮奶',			}],			value: undefined		}	})</script>

在这里插入图片描述

下拉框显示的是key，也就是这里的label。当选中一个选项时，会绑定对应的value值。
同理如果给定一个value值，则会找到对应的key值进行显示。如果找不到对应的key，会将value转成字符串类型，并显示

问题1：下拉框显示的值不对

<body>	<div id="app">		<el-select v-model="value" placeholder="请选择">			<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">			</el-option>		</el-select>	</div></body><script>	new Vue({   		el: '#app',		data: {   			options: [{   				value: 1,				label: '黄金糕',			}, {   				value: 2,				label: '双皮奶',			}],			value: '1'		}	})</script>

在这里插入图片描述
遇到的问题与上面这个例子很相似。从后台获取当前下拉框的选中值，并显示。当时后台给我返回了一个id，但是这个id是字符串类型的（需要一个整型），然后下拉框按照逻辑寻找对应的key，因为根本不存在这个value，所以就把这个id给显示了

问题2 ：下拉框有值却无法选中

这个bug就很莫名其妙。当时用两个下拉框，下拉选项值都是从后台获取到的。左边下拉框下拉选项可以正常选中，结果右边的下拉框无法选中；最主要的是这两个下拉框代码基本一样。然后问了下度娘，果然有解决方案

<el-form-item label="制造BOM版本">    <el-select v-model="records.recordForm.bomId" placeholder="请选择" :readonly="dialogTitle=='技术信息查看'" @change="$forceUpdate()">        <el-option v-for="item in bomList" :label="item.versionNo" :value="item.bomId" :key="item.bomId"></el-option>    </el-select></el-form-item>或者<el-select v-model="records.recordForm.bomId" placeholder="请选择" :readonly="dialogTitle=='技术信息查看'" @change="change">     <el-option v-for="item in bomList" :label="item.versionNo" :value="item.bomId" :key="item.bomId"></el-option> </el-select>change(){   	this.$forceUpdate()}

出现这个问题好像是因为下拉框数据是循环掉别的接口得来的，因为数据层次太多，render函数没有自动更新，需手动强制刷新所以我直接强制刷新了值，而forceUpdate就是重新render。

注：这里的无法选中指的是没有渲染，但是对应的值已经改变了。所以可以通过change事件来强行渲染

上一篇：Spring知识小汇（7）——AOP的相关知识

下一篇：element——弹窗

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

基本用法

问题1：下拉框显示的值不对

问题2 ：下拉框有值却无法选中

发表评论

最新留言

关于作者

推荐文章