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

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了 最后的效果如图