针对开发过程中遇到的vue-treeselect组件选项过长显示不全导致不清楚选择项是什么的问题,查阅资料发现可通过插槽加 Tooltip 来实现鼠标的悬浮提示,为了防止以后遗忘,在这里记录一下。
<treeselect
v-model="queryParams.companyId"
:options="companyOptions"
placeholder="选择公司"
:clearable="false"
@input="handleCompanyChange"
:disable-branch-nodes="true"
style="width: 240px"
>
<!-- 自定义选项标签 -->
<template #option-label="{ node, labelClassName }">
<el-tooltip
:content="node.label"
placement="top-start"
effect="dark"
>
<span :class="labelClassName">{{ node.label }}</span>
</el-tooltip>
</template>
</treeselect>

被折叠的 条评论
为什么被折叠?



