关于element 树形控件tree刷新或跳转页面后高亮显示当前节点
1.数据存储整个树的数据是从后端获取的,存在vuex中构造树时用Map将id和内容存起来,key: 像这样结构的字符串 (一级名:二级名:三级名:四级名)value:树节点id这几级内容也都是存在vuex中的,在树形控件中监听这几级内容的变化,只要有变化,就通过map查到树节点id,实现树节点高亮显示因为我做的项目需要用到四级树形控件,构造的map看起来可能会复杂些...
·
1.数据存储
整个树的数据是从后端获取的,存在vuex中
构造树时用Map将id和内容存起来,
key: 像这样结构的字符串 (一级名:二级名:三级名:四级名)
value:树节点id
这几级内容也都是存在vuex中的,在树形控件中监听这几级内容的变化,只要有变化,就通过map查到树节点id,实现树节点高亮显示
因为我做的项目需要用到四级树形控件,构造的map看起来可能会复杂些
2.高亮显示
//设置高亮显示
.el-tree--highlight-current /deep/ .el-tree-node.is-checked > .el-tree-node__content {
background-color: #F3F4F7;
color: rgb(64, 158, 255);
}
.el-tree--highlight-current /deep/ .el-tree-node.is-current > .el-tree-node__content {
background-color: #F3F4F7;
color: rgb(0, 158, 255);
}
element官网提供了这样的方法,参数为节点id
注意:一定要设置node-key属性
前面两步完成,已经基本实现了tree树形控件显示高亮的功能
但还有部分小坑
1.刷新页面后发现执行了这个函数,但是页面没有高亮显示
2.如果设置第二或者三四级为当前节点时,节点不会自动展开
3.刷新页面后高亮显示
关于执行了设置当前节点函数,但是页面没有高亮的原因,个人猜想是函数是在树形控件渲染完成之前执行的,也就是时机不对,导致没有渲染出来
我们可以使用nextTick来解决这个问题,像下面这样
4.节点自动展开
element官网中给出了这样的属性,将该属性绑定数组,把需要展开的节点添加到数组中就OK了
总结:
内容上说的没那么详细,只是给出了一个大致的思路
更多推荐
已为社区贡献3条内容
所有评论(0)