vue+ele爬坑之路（八）—el-tree

需求

1、多个组织树展示，默认第一棵树展开

2、部分设备可选择，部分设备不可选择

3、自定义图标

实现代码：template代码+css样式

相关代码

1、template

```

<el-tree
    class="tree-line"
    :data="treeLeft"
    :icon-class="'iconfont'"
    @check="checkEvent"
    :indent="0"
    node-key="id"
    show-checkbox
    highlight-current
    default-expand-all
    :props="defaultProps"
    :expand-on-click-node="true">
        <span class="custom-tree-node" slot-scope="{ node, data }" :title="node.label">
            {{node.label}}
        </span>
</el-tree>

```

2、css样式：

```

.tree-line {
    background: transparent;
    color: #1EFFFC;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 15px;
    .el-tree-node {
        position: relative;
        padding-left: 16px; // 缩进量
    }
    .el-tree-node__children {
        padding-left: 16px; // 缩进量
    }

    // 竖线
    .el-tree-node::before {
        content: "";
        height: 100%;
        width: 1px;
        position: absolute;
        left: -3px;
        top: -26px;
        border-width: 1px;
        border-left: 1px solid #486985;
    }
    // 当前层最后一个节点的竖线高度固定
    .el-tree-node:last-child::before {
        height: 38px; // 可以自己调节到合适数值
    }
    // 横线
    .el-tree-node::after {
        content: "";
        width: 25px;
        height: 20px;
        position: absolute;
        left: -3px;
        top: 12px;
        border-width: 1px;
        border-top: 1px solid #486985;
    }
    // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
    & > .el-tree-node::after {
        border-top: none;
    }
    & > .el-tree-node::before {
        border-left: none;
    }
    // 展开关闭的icon
    .el-tree-node__expand-icon {
        font-size: 16px;
    }

    .el-tree-node__children {
        margin-bottom: 15px;
        .el-tree-node__children {
            margin-bottom: 0;
        }
    }
    .el-tree-node__expand-icon.expanded{
        transform: rotate(0);
    }
    .iconfont{
        color: #177DDC;
        &.el-tree-node__expand-icon{
            &:before{
                content: "\E754"; //手动控制组织结构前面的图标，需搭配iconfont一起使用，配置icon-class属性名为：iconfont
            }
        }
        &.expanded{
            &:before{
                content: "\E755";  //手动控制展开时组织结构前面的图标
            }
        }
        &.is-leaf{
            &:before{
                content: '';
            }
        }

    }
}
.el-tree-node {
    &.is-focusable{
        margin-bottom: 15px;
    }
    .el-tree-node{
        margin-bottom: 0;
    }
}
.el-checkbox__inner{
    background-color: transparent;
    border-color: #486985;
}
.el-checkbox {
    &.is-disabled{
        display: none;
    }
}
.el-checkbox__input {
    &.is-checked{
        background-color: #177DDC;
    }
    &.is-indeterminate .el-checkbox__inner::before{
        background-color: #177DDC;
    }
}

// 组织树样式重构
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content,
.el-tree-node__content,.el-tree-node__content:hover,
.el-tree-node:focus>.el-tree-node__content,
.el-tree-node.is-focusable,.el-tree-node__content:hover,.el-tree-node__content:focus{
    background-color: transparent;
}

```

3、参数解析

参数名称	值	作用	说明
:data	treeLeft	配置组织列表数据
:icon-class	类名	动态修改组织树前面展示的图标	需要配合css样式一起使用，可查看css代码类名为iconfont的编写
@check	checkEvent	当复选框被点击的时候触发
show-checkbox	默认为true	显示当前组织树的复选框
default-expand-all	默认为true	默认展开所有节点
:props	defaultProps:{     children: "children",     label: "label",     id: "id", }	对象，设置组织树显示字段属性
:expand-on-click-node	默认为true	是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点
default-expanded-keys	数组	默认展开的节点的 key 的数组	可单独设置哪些节点需要展开