El-Tree节点名称过长处理

任何事物都无法抗拒吞食一切的时间。——泰戈尔

上一篇写到用el-tree实现触发部门管理的默认点击事件，但是当我们的部门名称过长时候发现展示效果不尽人意，查看文档后只能自己间接来实现了，借助el-tooltip和el-tree的自定义内容，以下是关于自定义内容的两种实现

可以通过两种方法进行树例程内容的自定义：render-content和范围槽。使用render-content指定渲染函数，该函数返回需要的例程区域内容即可。渲染函数的用法请参考Vue文档。参数node状语从句：data，分别表示当前节点的节点对象和当前节点的数据注意：由于的jsfiddle不支持JSX语法，所以render-content。示例在的jsfiddle中无法运行但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。

这里使用范围槽处理，二者逻辑类似，语法稍不同，废话不多说，直接上代码一目了然

          
            
                  
                     {{ node.label | ellipsis(8) }} 
                  
              

               // 这里可以接着继续写内容来渲染，比如操作按钮编辑删除等
              
            
          
        

ellipsis是一个过滤器，因为考虑到简单封装下可以全局系统使用，定义在vue目录结构filters中，声明如下

/**
 * 省略多余字符，用...显示
 * @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
}

关于过滤器的使用详见Vue Filters

在main.js中注册全局

import * as filters from "./filters";

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

附上最终效果图

el-tree