vue 树结构文字过长隐藏文字，鼠标移入显示

在utils下新建一个filters.js文件 内容

/**
 * 省略多余字符，用...显示
 * @param {String} value
 * @param {number} len
 */
export function ellipsis(value, len) {
  if (!value) return ''
  if (value.length > len) {
    return value.slice(0, len) + '...'
  }
  return value
}

在min.js引入

import * as filters from "@/utils/filters"


Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key]);
});

 <span class="custom-tree-node" slot-scope="{ node, data }">
            <el-tooltip class="item" effect="dark" :content="node.label" placement="top-start">
              <span>{{ node.label | ellipsis(5) }}</span>
            </el-tooltip>
<span>

可以带一个title超过10以后在显示，

:title="node.label.length>10?node.label:''"

附带参考地址：el-tree节点名称太长省略，且鼠标点击显示全部内容，Vue实现_HuiRonmantic的博客-CSDN博客

el-tree节点名称太长省略，且鼠标移入显示全部内容，Vue2实现_子恒吃西瓜的博客-CSDN博客