el-tree节点名称太长省略，且鼠标移入显示全部内容，Vue2实现

最新推荐文章于 2024-06-05 16:01:17 发布

weixin_46587302

最新推荐文章于 2024-06-05 16:01:17 发布

阅读量2.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：工作杂记文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_46587302/article/details/126606962

工作杂记专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Vue2中使用el-tree组件时，针对过长的节点名称进行省略显示，并通过鼠标悬停展示完整内容。利用Vue的过滤器实现了文本长度的裁剪及省略号添加。

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

el-tree节点名称太长省略，且鼠标移入显示全部内容，Vue2实现

代码结构

<el-tree
        :data="cskData"
        :props="cskbxProps"
        @node-contextmenu="rightClick"
        show-checkbox
        :default-expanded-keys="cskExpandedKeys"
        :default-checked-keys="checkBoxKeyList"
        ref="tree"
        highlight-current
        @node-click="getNodeCskData"
        @check-change="handleCheckChange"
        @check="handleCheck"
        node-key="tableColumnCodeAlias"
      >
          <span slot-scope="{ node, data }" class="custom-tree-node showname text-hide"  :title="node.label">
            <el-tooltip :content='data.label' placement="top"    
              effect="light">
              <div>{{data.label | ellipsis}}</div>
            </el-tooltip>
          </span>
      </el-tree>

在这里插入图片描述

filters:{
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 7) {
        return value.slice(0, 7) + "...";
      }
      return value;
    }
  },

使用vue2的filters（过滤器）。https://v2.cn.vuejs.org/v2/guide/filters.html

如果要将过滤器内的字数变为参数传入，则可以,

//这里以10为例
{{data.label | ellipsis(10)}}

filters:{
    ellipsis(value, k) {
      if (!value) return "";
      if (value.length > k) {
        return value.slice(0, k) + "...";
      }
      return value;
    }
  },