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

超、凢脫俗 2021-07-24 13:03 4874阅读 0赞

# 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 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70][]

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

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

![20201229174756413.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 1][]

obj：节点对象本身

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70]: /images/20210724/f62b8555c26f4c08842d17c9577115a5.png
[20201229174756413.png]: /images/20210724/289f4e9f3bff4152a780f8db50cacdf2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 1]: /images/20210724/42f863a4008e4489baca050c78205a55.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 2]: /images/20210724/a9f22f30519c448eb242a43e5ec8bbba.png