element plus 多选下拉框屏幕改变大小后内容会挤出

最新推荐文章于 2025-06-22 18:30:24 发布

原创最新推荐文章于 2025-06-22 18:30:24 发布 · 1.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

博客介绍了在使用ElementPlus框架时遇到的多选下拉框在屏幕大小调整后内容溢出的问题，并提供了解决方案。通过动态获取屏幕宽度，监听窗口尺寸变化，调整下拉框输入框高度，以及修改CSS样式来确保内容不被挤压。同时，针对添加选项时可能出现的布局bug，提出了在change事件中再次调整输入框高度的方法，以确保内容正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element plus 多选下拉框屏幕改变大小后内容会挤出

如图所示

需求是用户会随时缩放页面导致下拉框多选的时候会挤出框外解决办法：

动态获取屏幕宽度

const documentWidth = ref()
onMounted(()=>{
	documentWidth.value = document.body.clientWidth
	window.onrisize = () =>{
		return(()=>{
			documentWidth.value = document.body.clientWidth
		})
	}
})

监听屏幕宽度改变

watch(()=>documentWidth.value,()=>{
	let tags = document.getElementsByClassName('el-select__tags')
	//因为我这里有很多个这种下拉框 所以用循环
	//让输入框高度始终等于下拉框内容
	for(let i =0 ;i<tags.length;i++){
		tags[i].nextElementSibling.style.height = tags[i].offsetHeight+'px'
	}
})

这个时候再改变屏幕大小内容已经在输入框中了但是会有一个bug 那就是增加选项每次折行的时候内容会挤出来但再添加一个内容又会变好这种时候就要在下拉框的change事件中再写一遍改变input高度

nextTick(()=>{
	tags[0].nextElementSibling.style.height = tags[0].offsetHeight+'px'
})
//要用nextTick 是因为要在值改变之后再操作高度 不然会无效

最后一步可能会出现第一行超出的问题要修改一下css

在这里插入图片描述

.wrap .selectBox :deep(.el-select__tags){
	flex-wrap:nowrap !importent;
	overflow:hidden !importent;
}
.wrap .selectBox :deep(.el-select .el-tag:nth-child(1)){
	max-width:100px !important;
	overflow:hidden !importent;
	text-overflow:ellipsis !important;
	white-space:nowrap !important;
}