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

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

如图所示

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

1. 动态获取屏幕宽度

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

2. 监听屏幕宽度改变

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'
	}
})

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

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

4. 最后一步 可能会出现第一行超出的问题 要修改一下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;
}

ok了 最后的效果如图