el-tree的样式拓展

最近项目中使用到了elementUI，不免会用到el-tree组件，但是el自带的样式不是很好看，这里我们把el-tree的样式进行拓展，话不多说，直接上干货

      /*最外层背景色。 字体颜色*/
        .el-tree {
            background: none;
            color: #82b0ec;
        }

        /*图标颜色*/
        .el-tree-node__expand-icon {
            color: #698;
        }

        /*设置节点鼠标悬浮图标悬浮颜色*/
        .el-tree-node__content:hover .el-tree-node__expand-icon {
            color: #000
        }

        /*当鼠标点击tree的节点时显示的背景色,   字体颜色 */
        .el-tree-node:focus > .el-tree-node__content {
            background-color: #66b1ff87 !important;
            color: #fff;
        }
		/**透明色*/
        .el-tree-node__content:hover .el-tree-node__expand-icon.is-leaf {
            color: transparent;
        }

        /*选中节点 icon图标的颜色*/
        /*.el-tree-node:focus>.el-tree-node__content .el-tree-node__expand-icon{*/
        /*    color:#985*/
        /*}*/

        /*当鼠标移动时,节点显示的背景色*/
        .el-tree-node__content:hover {
            background-color: #66b1ff87;
        }

        /*当鼠标点击后,再点击空白地方,节点失去焦点时显示的背景色*/
        .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
            background-color: #66b1ff87;
        }

效果图

树 需要自定样式 也可以使用 :render-content=“renderContent” 自定义

节点点击事件

 		//点击节点事件
         handleNodeClick(node, data, value) {
             //node--{"id":9,"name":"1111"} 
             console.log("node--" + JSON.stringify(node));
             //do sth
             //id 次序
             console.log("id--" + data.id);
             var myTarget = value.$el;
             //dom元素
             console.log("value--" + myTarget);
             console.log("argu" + arguments.callee)
             let event = window.event || arguments.callee.caller.arguments[0];
             let target = event.srcElement || event.target;
         },

console输出

如果觉得我的文章帮助了你，请点赞支持我~ 谢谢~