1.調(diào)整的高度根據(jù)input組件sieze='mini'來的，不全適配，按需調(diào)整
給與?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="請(qǐng)選擇資質(zhì)"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :limit="1"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :limitText="count => `+${count}`"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :clearable="false"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :disabled="pageType == 'detail'"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? />
以下是樣式：
// 調(diào)整treeselect高度和橫向滾動(dòng)條
.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;
? }
}
效果如下：
