element 下拉框常见问题

最新推荐文章于 2024-07-15 22:54:01 发布

无知的小菜鸡

最新推荐文章于 2024-07-15 22:54:01 发布

阅读量2.1k

点赞数

本文链接：https://blog.csdn.net/weixin_41897680/article/details/111700007

版权

基本用法

<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事件来强行渲染

原问题链接

下拉数据过多

分页解决下拉数据过多问题

无知的小菜鸡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
element 下拉框常见问题

基本用法<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>&l
复制链接

扫一扫