ant design vue：select多选一行滚动条显示

<a-col :xl="8" :lg="7" :md="8" :sm="24">
              <a-form-item label="职位名称">
                <a-select v-model="recruitmentIds" mode="multiple" style="width: 100%" placeholder="请选择招录名称"
                  @change="handleChange" :options="options">
                </a-select>
              </a-form-item>
            </a-col>

下拉多选默认的样式是这样的，会把行高拉大，跟其他组件行高不一致，影响美观。

我们需要对select的样式重新设置，如下：

/* 让元素水平排列 */
  /deep/ .ant-select-selection--multiple .ant-select-selection__rendered {
    margin-left: 5px;
    margin-bottom: -3px;
    height: auto;
    max-height: 30px;
    max-width: 214px;
    overflow: auto;
    overflow-y: hidden;
  }

  /deep/.ant-select-selection--multiple .ant-select-selection__choice {
    overflow: initial;
  }

  /* 调整内部样式 */
  /deep/.ant-select ul,
  .ant-select ol {
    display: flex;
  }

  /deep/.ant-select-selection--multiple>ul>li,
  .ant-select-selection--multiple .ant-select-selection__rendered>ul>li {
    margin-top: 3px;
    height: 22px;
    line-height: 22px;
    font-size: 14px;
    width: auto;
    max-height: 200px;
  }

 /deep/.ant-select-search--inline .ant-select-search__field__wrap {
    max-width: 0px;
  }

  /deep/.ant-select-selection__rendered::-webkit-scrollbar {
    /*滚动条整体样式*/
    height: 5px;
  }

  /deep/.ant-select-selection__rendered::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    /* background: lightskyblue; */
    cursor: pointer;
  }

  /deep/.ant-select-selection__rendered::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
    border-radius: 10px;
    background: #ededed;
    cursor: pointer;
  }

然后下拉多选就变成一行了，带滚动条显示。

至此一切都完美，但是随着项目推移，加入了更多组件，发现一个非常奇怪的现象，某个使用了select的自定义组件在其他地方都显示正常，在某个页面显示异常，宽度不够，高度比其他组件高。

正常显示如下图：

异常显示如下图：

排查了半天，发现是上面下拉多选样式覆盖导致的，所以需要给组件加id，css里都加上id，就不会再影响其他组件了。

 /* 让元素水平排列 */
   /* 一定要加 #recruitmentIds，以免影响其他select组件的样式*/
     /deep/ #recruitmentIds .ant-select-selection--multiple .ant-select-selection__rendered {
       margin-left: 5px;
       margin-bottom: -3px;
       height: auto;
       max-height: 30px;
       max-width: 214px;
       overflow: auto;
       overflow-y: hidden;
     }
   
     /deep/ #recruitmentIds .ant-select-selection--multiple .ant-select-selection__choice {
       overflow: initial;
     }
   
     /* 调整内部样式 */
     /* #recruitmentIds和.ant-select之间不能有空格 */
     /deep/ #recruitmentIds.ant-select ul,
      #recruitmentIds.ant-select ol {
       display: flex;
     }
   
     /deep/ #recruitmentIds .ant-select-selection--multiple>ul>li,
      #recruitmentIds .ant-select-selection--multiple .ant-select-selection__rendered>ul>li {
       margin-top: 3px;
       height: 22px;
       line-height: 22px;
       font-size: 14px;
       width: auto;
       max-height: 200px;
     }
   
    /deep/ #recruitmentIds .ant-select-search--inline .ant-select-search__field__wrap {
       max-width: 0px;
     }
   
     /deep/ #recruitmentIds .ant-select-selection__rendered::-webkit-scrollbar {
       /*滚动条整体样式*/
       height: 5px;
     }
   
     /deep/ #recruitmentIds .ant-select-selection__rendered::-webkit-scrollbar-thumb {
       /*滚动条里面小方块*/
       border-radius: 10px;
       -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
       /* background: lightskyblue; */
       cursor: pointer;
     }
   
     /deep/ #recruitmentIds .ant-select-selection__rendered::-webkit-scrollbar-track {
       /*滚动条里面轨道*/
       -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
       border-radius: 10px;
       background: #ededed;
       cursor: pointer;
     }

样式问题有时候会很难排查，并且现象很诡异，上次也遇到过。

https://blog.csdn.net/lilycheng1986/article/details/121952708

另外也要养成好习惯，自定义样式的时候一定记得带上id。