两行实现！Ant Design Vue树选择组件选择框不换行 一行显示（横向滚动条）（附滚动条自定义样式）_antd 的select怎么不换行

Antd Vue tree-select 选择框一行显示 支持搜索

实现选择框一行显示 不换行

.ant-select-selection--multiple {
  overflow-x: auto;
  overflow-y: hidden;
  max-height: 33px;
}
// 重要两行
.ant-select-selection--multiple .ant-select-selection__rendered {
  white-space: nowrap; 
  display: inline-flex;
}
1
2
3
4
5
6
7
8
9
10

自定义滚动条（下拉菜单的滚动条也一起美化了）

.ant-select-selection--multiple::-webkit-scrollbar,
.ant-select-dropdown::-webkit-scrollbar {
  /*滚动条整体样式*/
  height: 5px;
}
.ant-select-selection--multiple::-webkit-scrollbar-thumb,
.ant-select-dropdown::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: lightskyblue;
}
.ant-select-selection--multiple::-webkit-scrollbar-track,
.ant-select-dropdown::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: #ededed;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

自定义checkbox样式

.ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner {
  background-color: #36b8e0;
  border-color: #36b8e0;
}
1
2
3
4

效果如图：