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:节点对象本身