问题描述:
Element-UI el-select 多选菜单换行撑开显示破坏整体样式
问题解决:
添加如下样式:
<style lang="scss" scoped>
/deep/ .el-select__tags {
flex-wrap: unset;
overflow: auto;
}
</style>
若出现滚动条样式不好看,可以更改样式,和elementui保持一致。
<style lang="scss" scoped>
/deep/ .el-select__tags {
flex-wrap: unset;
overflow: auto;
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
&::-webkit-scrollbar {
width: 5px;
height: 5px;
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
border-radius: 20px;
}
}
</style>
<style lang="scss" scoped>
/deep/ .el-select__tags {
flex-wrap: unset;
overflow: auto;
&::-webkit-scrollbar {
width: 5px;
height: 5px;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px; /*滚动条的圆角*/
-webkit-box-shadow: inset 0 0 6px rgba(145, 143, 0143, 0.3);
background-color: rgb(145, 143, 143); /*滚动条的背景颜色*/
}
&::-webkit-scrollbar-track {
border-radius: 10px; /*滚动条的背景区域的圆角*/
-webkit-box-shadow: inset 0 0 6px rgba(238,238,238, 0.3);
background-color: #eeeeee; /*滚动条的背景颜色*/
}
}
</style>