el-tree的使用与样式修改大全

el-tree的使用与样式修改大全

一、样式篇

1、修改节点选中后的背景样式

.el-tree-node:focus>.el-tree-node__content{
      background-color: #5daaf0;   //背景色
    }

2、节点hover后的背景样式

.el-tree-node__content {
      &:hover {
        background: #89c2f7;
      }
    }

3、节点字体样式

.el-tree-node__label {
width: auto;
margin-top: 12px;
float: right;
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #999999;
line-height: 25px;
letter-spacing: 1px;
}

 

 

 

 

二、使用篇

1、点击每个节点，响应的事件：node-click

  nodeClickHandle: function(data,node,obj) {
                console.log('data',data)
                console.log('node',node)
                console.log('obj',obj)
            },

data：节点对应的数据本身，就是树节点传的data参数里的一条记录

node：节点的node，包括节点个各种属性性质

obj：节点对象本身