1.调整的高度根据input组件sieze='mini'来的，不全适配，按需调整
给与 class="set-treeselect"
<treeselect
v-if="b.inputType == 7"
:disable-branch-nodes="true"
multiple
size="mini"
class="set-treeselect"
v-model="b.rightOperand"
:options="treeList"
:normalizer="normalizer"
:show-count="true"
placeholder="请选择资质"
:limit="1"
:limitText="count => `+${count}`"
:clearable="false"
:disabled="pageType == 'detail'"
/>
以下是样式：
// 调整treeselect高度和横向滚动条
.set-treeselect {
width: 240px;
display: inline-block;
position: relative;
top: 10px;
height: 32px;
}
::v-deep {
.vue-treeselect__menu {
overflow-x: auto !important;
width: 250px;
max-height: 180px !important;
}
.vue-treeselect__label {
overflow: unset;
text-overflow: unset;
}
.vue-treeselect__control {
height: 20px !important;
}
.vue-treeselect__multi-value-item-container,
.vue-treeselect--has-value .vue-treeselect__multi-value {
height: 30px;
line-height: 24px;
padding: 0;
}
.vue-treeselect__limit-tip,
.vue-treeselect--searchable.vue-treeselect--multi.vue-treeselect--has-value
.vue-treeselect__input-container {
padding-top: 0;
}
.vue-treeselect--has-value .vue-treeselect__multi-value {
// margin-bottom: 15px;
}
.vue-treeselect__placeholder,
.vue-treeselect__single-value {
height: 28px;
line-height: 32px;
font-size: small;
color: "#CCCFD6";
// margin-top: 8px;
}
.vue-treeselect--has-value .vue-treeselect__input {
height: 18px !important;
line-height: 18px !important;
}
.vue-treeselect div,
.vue-treeselect span {
box-sizing: content-box;
// white-space: nowrap;
// text-overflow: ellipsis;
}
// 选中后的溢出隐藏
.vue-treeselect__multi-value-label {
display: block;
width: 140px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.vue-treeselect__value-container {
display: block;
height: 32px;
}
}
效果如下：
网友评论