效果图:

框架：Vue+AntdesignVue

业务中使用下拉框时，遇到多选但是换行造成整体表单布局不美观，所以这时候需要前端对下拉框做些修整以及改观

不多说废话，直接贴代码:

view层:

<a-form-item label="站点：" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
                  <a-select
                    class="sitemore"
                    showSearch
                    placeholder="请选择"
                    mode="multiple"
                    v-decorator="[
            'siteName',
            {
              rules: [
                {required: true, message: '请选择站点！',}
              ],
            }]"
                  >
                    <a-select-option
                      v-for="(item, index) in stationList"
                      :key="index"
                      :value="item.id"
                    >
                      <a-tooltip placement="top">
                        <template slot="title">{{item.name}}</template>
                        {{item.name}}
                      </a-tooltip>
                    </a-select-option>
                  </a-select>
                </a-form-item>

css层：

.sitemore {
  width: 320px;
  height: 40px;
  display: flex;
  line-height: 40px;
  align-items: center;
  /deep/ .ant-select-selection--multiple {
    width: 100%;
    height: 32px;
    /deep/ .ant-select-selection__rendered {
      height: 100%;
      ul {
        width: 100%;
        height: 100%;
        overflow-y: hidden;
        display: -webkit-box;
        &::-webkit-scrollbar {
          width: 5px;
          height: 5px;
        }
        &::-webkit-scrollbar-track {
          background-color: #dedede;
          -webkit-border-radius: 1em;
          -moz-border-radius: 1em;
          border-radius: 1em;
        }
        &::-webkit-scrollbar-thumb {
          background-color: #bfbfbf;
          -webkit-border-radius: 1em;
          -moz-border-radius: 1em;
          border-radius: 1em;
        }
        & > li {
          padding: 0px 10px 0px 5px;
          box-sizing: border-box;
          width: 75px;
          float: unset;
        }
      }
    }
  }
}