任何事物都可以抗拒时间吞噬一切。——泰戈尔在上一篇文章中写道，el-tree是用来实现触发部门管理的默认点击事件，但是当我们的部门名称过长时，我们发现显示效果并不理想。查看文档后，我们只能自己间接实现。借助el-Customcontentoftooltip和el-tree，下面是自定义内容的两种实现，自定义tree例程的内容有两种方式：render-content和rangeslot。使用render-content指定渲染函数，返回需要的例程区域内容。渲染功能的使用请参考Vue文档。参数node状语从句：data，分别表示当前节点的节点对象和当前节点的数据注：由于jsfiddle不支持JSX语法，render-content.该示例在jsfiddle中无法运行，但在实际项目中，只要正确配置相关依赖，即可正常运行。这里使用范围槽处理。两者的逻辑相似，语法略有不同。废话不多说，直接上代码一看就知道了。
{{node.label|ellipsis(8)}}//这里可以继续写内容渲染，比如编辑删除操作按钮等
ellipsis是一个filter，因为考虑到它可以在简单封装下供全局系统使用，所以定义在vue目录结构filters中，声明如下/***省略冗余字符并显示为...*@param{String}value*@param{number}len*/exportfunctionellipsis(value,len){if(!value)return''if(value.length>len){returnvalue.slice(0,len)+'...'}returnvalue}关于过滤器的使用详情参见VueFiltersregisterglobalimportinmain.js*asfiltersfrom"./filters";//registerglobalutilityfiltersObject.keys(filters).forEach(key=>{Vue.filter(key,filters[key]);});附上最终效果图
