element-tree中文字过长显示tooltip_el-tree tooltip-CSDN博客

本文链接：https://blog.csdn.net/qq_52395343/article/details/130218465

关键代码：

  <span class="tree-text" v-if="node.label.length <= 10"> {{ node.label }}</span>
   <el-tooltip v-else effect="dark" :content="node.label" placement="top">
  <span class="tree-text"> {{ node.label }}</span>

.tree-text {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  width: 100%;
}

el-tree完整部分：

 <el-tree
      ref="treeRef"
      class="mt-5"
      :default-expanded-keys="[0]"
      :expand-on-click-node="false"
      :data="orgTreeState.departmentTree"
      :highlight-current="true"
      :node-key="orgTreeState.treeOptions.nodeKey"
      :props="orgTreeState.treeOptions.props"
      v-loading="orgTreeState.isLoading"
      :filter-node-method="filterNode"
      @node-click="clickTree">
      <!-- 自定义 tree 内容 -->
      <template #default="{ node, data }">
        <span>
          <!-- 拥有子节点 -->
          <template v-if="!node.isLeaf || data.nodeType === 'Node'">
            <Ep-Folder v-if="!node.expanded" />
            <Ep-FolderOpened v-else />
          </template>
          <!-- 无子节点 -->
          <template v-else>
            <Ep-Document />
          </template>
        </span>
        <span class="tree-text" v-if="node.label.length <= 10"> {{ node.label }}</span>
        <el-tooltip v-else effect="dark" :content="node.label" placement="top">
          <span class="tree-text"> {{ node.label }}</span>
        </el-tooltip>
      </template>
    </el-tree>