layui 里的组件tree，点击后添加选中效果

 先绑定元素，添加点击事件，在点击事件里给当前点击的元素添加class

tree.render({
      elem: '#tree',  //绑定元素
      data: treeLists,
      onlyIconControl:true,//是否仅允许节点左侧图标控制展开收缩。默认 false（即点击节点本身也可控制）。若为 true，则只能通过节点左侧图标来展开收缩
      click: function(obj){  //点击事件
        //把添加的class全部移除
        var nodes = document.getElementsByClassName("layui-tree-set");
        for (var i = 0; i < nodes.length; i++) {
          nodes[i].classList.remove('tree-item-clicked')
        }
       //给当前点击的元素添加选中的class名
        obj.elem[0].classList.add('tree-item-clicked')
      }
    })

css里：

//选中后的颜色  >是必要的，如果不加，当点击的是父级，子元素的所有颜色都会变
.tree-item-clicked>.layui-tree-entry .layui-tree-txt{
    background:#bae7ff!important;
    padding-left:5px;
    padding-right:5px;
}
//hover时的颜色
.layui-tree-line .layui-tree-entry:hover .layui-tree-txt{
    background:#e6f7ff;
}

效果如下：