当树形分支过多..字段太长了看不到后面的选项

[xiaohongjian1989]

禁用 vue-treeselect.css 里的 426,506, 566,725行

[richwxd]

是不是需要自定义css？

[David-Tsui]

我也是自定義了

[allenGKC]

请问有办法做到，如果点击重庆分公司，显示的是顶呱呱集团/企业服务研究院/重庆分公司 这种形式嘛

[David-Tsui]

@allenGKC

這看過了嗎
https://vue-treeselect.js.org/#customize-value-label

現有功能應該沒有，我是自己把每個node加上parent node label便可以達到

[allenGKC]

@allenGKC

這看過了嗎
https://vue-treeselect.js.org/#customize-value-label

現有功能應該沒有，我是自己把每個node加上parent node label便可以達到

方便给个示例嘛？

[gjwfiza]

@xiaohongjian1989 请问能贴一下具体禁用CSS的位置吗？可能编辑器缘故不能定位到你所注释的位置

[David-Tsui]

@gjwfiza 直接覆寫過去就好；如果你要定位選項框，請使用devtools，檢視DOM，先選到vue-treeselect組件最外層，然後滑鼠右鍵->Break on->Subtree modifications，然後一直按F10執行到選項框跳出來就可以用devtool定位了。

以下給你參考
.vue-treeselect.vue-treeselect--append-to-body.vue-treeselect--open-below .vue-treeselect__menu { width: 278px; }

---

@gjwfiza You can just override the rule. If you want to select the options container, you can use your devtool to select the outermost div of vue-treeselect, then right click your mouse, Break on, Subtree modifications, you would be able to select it when the options container shows by continuously pressing your F10 .

[gjwfiza]

如果过长的时候能悬浮提示候选项完整名称就好了，单改变menu的宽度总觉得很别扭

[David-Tsui]

如果整個選項框裡的選項都過長，每一項目都會是...結尾，這才真彆扭吧

[qihb]

添加自定义节点（官方文档说明在：Customize Option Label）然后在上面自己加一个title就可以实现鼠标放上去提示的效果

<treeselect
    :options="options"
    :load-options="loadOptions"
    placeholder="请选择"
    v-model.trim="consignorId"
  >
      <label slot="option-label" 
        slot-scope="{ node, shouldShowCount, count,countClassName, labelClassName }" 
        :class="labelClassName"
        :title="node.label" >
        {{ node.label }}
      </label>
</treeselect>

[wuRoyell]

@David-Tsui 我找到节点了，然后样式写在组件下的scss 里面，但是没有覆盖的效果
/deep/ .vue-treeselect.vue-treeselect--append-to-body.vue-treeselect--open-below .vue-treeselect__menu {
width: 388px !important;
}
/deep/ .vue-treeselect__label-container {
width: auto !important;
display: inline-block;
vertical-align: middle;
white-space: nowrap;
}
请大佬看到回复一下，真的晕了

[wuRoyell]

@David-Tsui 弄好了，我重新建一个css文件夹引入main.js里面就可以了

[BartusZak]

@qihb thanks for a quick solution 👍 (Had to translate the whole issue tab to eng) 👯

[longqizhu]

试试这个

.vue-treeselect.vue-treeselect--single {
.vue-treeselect__menu {
min-width: 100%;
.vue-treeselect__option {
display: flex;
flex-wrap: nowrap;
vertical-align: middle;
.vue-treeselect__option-arrow-placeholder {
flex: none;
}
.vue-treeselect__option-arrow-container {
flex: none;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 2px;
}
.vue-treeselect__label-container {
flex: none;
display: block;
width: auto;
}
}
}
}

[lwx1985]

自定义 .vue-treeselect__menu-container 直接暴力拉长了

[gybgybg]

试试这个

.vue-treeselect.vue-treeselect--single { .vue-treeselect__menu { min-width: 100%; .vue-treeselect__option { display: flex; flex-wrap: nowrap; vertical-align: middle; .vue-treeselect__option-arrow-placeholder { flex: none; } .vue-treeselect__option-arrow-container { flex: none; display: flex; align-items: center; justify-content: center; padding-bottom: 2px; } .vue-treeselect__label-container { flex: none; display: block; width: auto; } } } }

确实有用