带你一步步设置layui的tree树结构点击高亮

如何点击layui的tree后高亮该点击，本文带你快速设置点击高亮。

点击高亮最主要的是点击，所以高亮我们需要从树点击开始看起。

先上tree配置

var tree = layui.tree;

tree.render({
        elem: '#category_tree',
        data: data,
        showCheckbox: false,
        id: 'tree_id',
        isJump: false,
        onlyIconControl: true,
        text: {
                none: '<div class="cate-empty">无</div>',
        },
        click: function(obj) {
                // 点击高亮
                $(".layui-tree-set").removeClass('layui-tree-set-active');
                obj.elem.addClass('layui-tree-set-active');
        }
});

可以看到，tree点击后obj的对象是当前node的对象加data数据，我们要做的就是根据当前的obj信息增加当前node的顶级class以确定当前node已被点击，具体可查看配置代码。

那么，现在只是设置当前点击的node加了活动的class，要怎么来实现高亮啊？

重要的一点来了，既然已经设置了当前node的活动class，我们再写一个css不就解决了高亮的问题了吗。

说写就写，下面就是作者用到的一个css设置，具体的可以根据你的项目来设置

.layui-tree-set-active > .layui-tree-entry .layui-tree-main {
    background: #f2f2f2;
}

截图预览

具体效果可以查看该项目
lake-admin-cms