問題描述:
??????????Element-UI el-select 多選菜單換行撐開顯示破壞整體樣式
?問題解決:
????????添加如下樣式:
<style lang="scss" scoped>
/deep/ .el-select__tags {
flex-wrap: unset;
overflow: auto;
}
</style>
?????????若出現(xiàn)滾動(dòng)條樣式不好看,可以更改樣式,和elementui保持一致。
?文章來源地址http://www.zghlxwxcb.cn/news/detail-563174.html
<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; /*滾動(dòng)條的圓角*/
-webkit-box-shadow: inset 0 0 6px rgba(145, 143, 0143, 0.3);
background-color: rgb(145, 143, 143); /*滾動(dòng)條的背景顏色*/
}
&::-webkit-scrollbar-track {
border-radius: 10px; /*滾動(dòng)條的背景區(qū)域的圓角*/
-webkit-box-shadow: inset 0 0 6px rgba(238,238,238, 0.3);
background-color: #eeeeee; /*滾動(dòng)條的背景顏色*/
}
}
</style>
文章來源:http://www.zghlxwxcb.cn/news/detail-563174.html
?
到了這里,關(guān)于Element-UI el-select 多選菜單換行撐開的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!