任何事物都无法抗拒吞食一切的时间。——泰戈尔
上一篇写到用el-tree实现触发部门管理的默认点击事件，但是当我们的部门名称过长时候发现展示效果不尽人意，查看文档后只能自己间接来实现了，借助el-tooltip和el-tree的自定义内容，以下是关于自定义内容的两种实现
可以通过两种方法进行树例程内容的自定义：
render-content和范围槽。使用render-content指定渲染函数，该函数返回需要的例程区域内容即可。渲染函数的用法请参考Vue文档。参数node状语从句：data，分别表示当前节点的节点对象和当前节点的数据注意：由于的jsfiddle不支持JSX语法，所以render-content。示例在的jsfiddle中无法运行但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。
这里使用范围槽处理，二者逻辑类似，语法稍不同，废话不多说，直接上代码一目了然
<div>
<el-tree
:data="deptTree"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
highlight-current
node-key="id"
ref="tree"
default-expand-all
@node-click="handleNodeClick">
<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(8) }} </span>
</el-tooltip>
<div>
// 这里可以接着继续写内容来渲染，比如操作按钮编辑删除等
</div>
</span>
</el-tree>
</div>
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
