Element-UI el-select 多选菜单换行撑开

金乌Y

已于 2022-09-22 13:56:34 修改

阅读量1.4k

点赞数

分类专栏： elementui 文章标签： elementui javascript vue.js

于 2022-09-22 12:05:08 首次发布

本文链接：https://blog.csdn.net/qq_44170108/article/details/126986747

版权

elementui 专栏收录该内容

16 篇文章 4 订阅

订阅专栏

问题描述：

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>