Element-UI el-select 多选菜单换行撑开-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element-UI el-select 多选菜单换行撑开。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题描述：

Element-UI el-select 多选菜单换行撑开显示破坏整体样式

elemt ui多选 select一行展示滚动条,elementui,elementui,javascript,vue.js

问题解决：

添加如下样式：

<style  lang="scss" scoped>
 /deep/ .el-select__tags { 
   flex-wrap: unset; 
   overflow: auto;
 }
</style>

若出现滚动条样式不好看，可以更改样式，和elementui保持一致。

elemt ui多选 select一行展示滚动条,elementui,elementui,javascript,vue.js

文章来源地址https://www.toymoban.com/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>

elemt ui多选 select一行展示滚动条,elementui,elementui,javascript,vue.js

<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>

elemt ui多选 select一行展示滚动条,elementui,elementui,javascript,vue.js