treeSelect提示框添加tip文字提示

最新推荐文章于 2024-04-26 16:18:51 发布

呦呦鹿铭

最新推荐文章于 2024-04-26 16:18:51 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/mm_520111111/article/details/126460433

Vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种解决子部门名称过长导致显示不全的问题的方法。通过修改CSS样式及利用treeselect组件的作用域插槽，实现了名称过长时的提示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

某个子部门名太长了，无法显示完整，需要给一个提示框
在这里插入图片描述

实现

1.首先使用修改css样式的方式，添加进度条，发现并不太理想，

<style scoped>
  /deep/.vue-treeselect__menu{
    overflow: auto;
    width: 100%;
  }

  /deep/.vue-treeselect div, .vue-treeselect span{
    box-sizing:content-box;
  }
</style>

2.搜索到帖子

3.根据帖子修改

<treeselect ref="deptPost" :clearOnSelect="true"  v-model="queryParams.params.deptIds" :options="deptPostOptions" :disable-branch-nodes="false"
                          :multiple="true"
                          @close="selectProData"
                          :normalizer="normalizer"
                          :show-count="true"
                          placeholder="请选择机构"
                          :style="{width: '190px'}"
                          :limit="0"
                          :limitText="count => `共${count}项`"
                          @keyup.enter.native="handleQuery"
              >
                <el-tooltip slot="option-label" slot-scope="{node, shouldShowCount, count,labelClassName, countClassName}" :content="node.label" :class="labelClassName" placement="top-start">
                  <span>{{node.label}}</span>
                </el-tooltip>
              </treeselect>

这里用了treeselect提供的作用域插槽来实现

进入treeselect可以发现，大概有四种作用域插槽（value-label，option-label，before-list，after-list）

 <el-tooltip slot="option-label" slot-scope="{node, shouldShowCount, count,labelClassName, countClassName}" :content="node.label" :class="labelClassName" placement="top-start">
                  <span :title="node.label">{{node.label}}</span>
                </el-tooltip>