【不要靠近树形控件，会变得不幸】elementUI填坑 设置当前节点高亮setCurrentKey 树形控件自定义hover 悬浮图标

11-01更新

开发中使用到了elementui的树形空间，因为要符合自己设计的页面的风格，所以对组件的小细节进行了调整

<el-tree :data="data" :props="defaultProps" 
@node-click="handleNodeClick" node-key="id" 
:check-on-click-node="true" :draggable="true" 
:highlight-current="true" :expand-on-click-node="false" 
:render-content="renderContent"></el-tree>

鼠标悬浮右侧显示操作图标 （达到hover的效果）

官方文档中展示了使用render-content的方法

renderContent函数中添加了两个图标 函数传入的data就是组件需要的参数data中的一段
这段代码不允许使用v-bind 所以我在传入的data中的每个节点中都加入了一个字段style来控制悬浮图标的展示与否。通过设置鼠标监听函数来调整传入data中的style

renderContent(h, { node, data, store }) {
            return (
            <span class="custom-tree-node" 
                on-mouseenter={() => data.style.visibility = "visible"} 
                on-mouseleave={() => data.style.visibility = "hidden"}>
                <span>{node.label}</span>
                <span class="treeIcon" style={data.style}>
                    <i class="el-icon-plus"></i>
                    <i class="el-icon-more"></i>
                </span>
            </span>
            );
        }

绑定监听函数时使用on-envent

组件的结构如下图所示，代码中监听的是鼠标进出custom-tree-node元素 因为红色区域比蓝色区域小 所以要设置红色区域的padding 使之盛满整个蓝色区域，不然会出现鼠标悬浮只有hover效果却不出现悬浮图标的情况。

.inner .custom-tree-node{
    display: inline-block;  /*将元素撑开*/
    width: 90%;   /*留出左侧展开图标的位置*/
    padding: 4.6px 0;  /*盛满父元素*/
}
.inner .treeIcon{
    float: right; /*悬浮图标部分向右浮动*/
}

更改hover样式

我需要的hover样式是文字变色 但是组件中是更改背景色
检查组件的html结构发现 组件时通过一个el-tree–highlight-current的class来更改样式的 所以修改代码如下：

.inner .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
    background-color: transparent;
    color: #6666cc;
}

悬浮工具栏

左侧按钮点击时应展示悬浮工具栏 我先是写了悬浮工具栏的组件在页面中导入，点击图标是获取到图标元素的位置 设置到工具栏组件上

因为左侧悬浮图标是渲染函数中添加的 所以在渲染函数中绑定函数 并将dom元素扔出来

因为on-clikc事件中无法通过this获取到元素本身 所以要绑定两个点击事件 一个onclick用于获取元素本身 一个触发组件中的函数

在全局中设置变量保存点击的元素

more(){
			//阻止冒泡
            if (event.stopPropagation) {
                event.stopPropagation();
            } else {
                event.cancelBubble = true;
            }
            控制工具栏的显示和隐藏 同时设置工具栏显示的位置
            if (this.showContext) {
               this.showContext = false;
            } else {
                this.showContext = true;
                console.log(window.x.getBoundingClientRect().left)
                this.contextstyle.left = window.x.getBoundingClientRect().left + 5 + "px";
                this.contextstyle.top = window.x.getBoundingClientRect().top - 35 + "px";
            }
        },

效果图如下


同时设置监听函数 监听鼠标的点击事件和左侧部分的滚动事件 控制工具栏的消失

11-22更新

树形控件懒加载

elementui其实提供了很多方法 但是文档描述的不详细 在做的时候经常在查看文档上花费很多事件
树形控件有几个比较核心的属性和方法
一个是node-key 还有node和data 大部分方法都会在调用时自动作为参数传入 node是当前节点对象 data是节点的数据 知道了这三个属性其他的都会迎刃而解
懒加载的条件：
1.开启lazy模式
2.提供load函数
3.props中要包含isLeaf属性，来控制是否显示展开按钮

load(node, resove){   //两个参数  分别为触发节点和回调函数
	if (node.level == 0) {   //根节点   组件创建时自动调用该函数
         this.getTree(resove);  //把根节点加载放到外面
         return;
    }
    //下面写其他节点的获取方法
    getNode(){
    	//内容省略，获取到数据后  
	    resove(arr);  //返回的是和tree组件需要的data格式相同的数组
	    return;
    }
    //防止没有数据一直显示加载状态   返回空
    return；
}
getTree(resove) {
	//请求函数
	//和上面类似  省略
	
}

树形控件控制选中状态

其实文档中给出了很多有用的函数 这里就不赘述了 总之 仔细看文档 一下的函数会被控制组件状态使用到

12-16更新

做了一个文档管理平台，我的需求是页面加载时通过路由判断需要打开哪个文档 并定位到那个文件

1.一开始在mounted中使用

this.$refs.tree.setCurrentKey(fileId);

控制台报错说没有这个函数 按理说不应该 但还是尝试使用$nextick，无效
（考虑到可能是有内容么有加载完）
2.再次尝试，思考是不是加载根节点时有其他操作覆盖了先前的操作
添加监听函数

currentFileId(val) {
    console.log(val);
    this.$refs.tree.setCurrentKey(val); 
}

控制台只打印了一次 说明并没有被覆盖，此时不报错也不生效
3.继续尝试，因为树形控件使用了懒加载，所以我想会不会是因为懒加载我没有完成就进行操作导致操作无效，所以我跳出当前这个功能，在属于整个组件的懒加载函数的最后进行设置，意外的发现十次刷新有五次高亮显示生效，此时就能确定确实是因为懒加载没有完成
所以解决方法如下：
在懒加载方法的请求回调函数中添加

this.$nextTick(() => {
	this.$refs['tree'].setCurrentKey(this.currentFileId);
})

懒加载请求结束之前就算使用了nexTick函数也会无效