treeSelect提示框添加tip文字提示

需求

某个子部门名太长了，无法显示完整，需要给一个提示框

实现

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>