El-Tree节点名称过长处理

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

上一篇写到用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