elementUI tree组件设置样式

1. 改变tree的背景色

::v-deep .el-tree{
  background-color: #f5f5f5;
}

2. tree组件鼠标hover悬浮背景色

::v-deep.el-tree-node__content{
  &:hover{
    background-color: red;
  }
}

3. tree组件选中背景色修改

::v-deep.el-tree-node.is-current > .el-tree-node__content {
    background-color: black !important;
  }

4.tree组件设置图标

    ::v-deep.tree{
        .el-tree-node__expand-icon.expanded {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        // 收起
        .el-icon-caret-right:before {
            content: '\e6d9';       
            border: 1px solid #999999;			   
        }
        // 展开
        .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
            content: '\e6d8';
            color: #165DFF;
            border: 1px solid #165DFF;
        }
        .el-tree-node__expand-icon.is-leaf:before  {
            content: '' !important;
            border: none;
        }
    }

实现效果

5. tree组件有指示线(1)
实现效果

<el-tree
    class="tree-line"
    :data="data"
    show-checkbox
    node-key="id"
    :props="defaultProps"
>
</el-tree>

css样式

.tree-line{
    .el-tree-node {
        position: relative;
        padding-left: 16px;
    }
    .el-tree-node__content {
        margin-top: 10px;
    }
    .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 dashed #707070;
    }
    
    .el-tree-node:last-child::before {
        height: 38px;
    }
    .el-tree-node::after {
        content: '';
        width: 24px;
        height: 20px;
        position: absolute;
        left: -3px;
        top: 12px;
        border-width: 1px;
        border-top: 1px dashed #707070;
    }
    & > .el-tree-node::after {
        border-top: none;
    }
    & > .el-tree-node::before {
        border-left: none;
    }
    .el-tree-node__expand-icon {
        color: #000;
        &.is-leaf {
        color: transparent;
        }
    }
}

6. tree组件有指示线(2)

加号图

减号图

<div class="treeFather">
    <el-tree
    class="departmentTree"
    :data="treeData"
    default-expand-all
    node-key="id"
    ref="powerTree"
    show-checkbox
    highlight-current
    :props="defaultProps">
    <span class="custom-tree-node" slot-scope="scope">
        <svg-icon icon-class="tree" />
        {{ scope.data.label }}
    </span>
    </el-tree>
</div>


treeData: [{
        id: 1,
        label: 'xxx学院',
        children: [{
          id: 2,
          label: '计算机学院',
          children: [{
            id: 5,
            label: '某某专业',
            children: [{
              id: 8,
              label: '某某方向'
            },{
              id: 9,
              label: '某某方向二'
            },{
              id: 10,
              label: '某某方向三'
            }]
          }, {
            id: 6,
            label: '某某专业二'
          },{
            id: 7,
            label: '某某专业三'
          }]
        },{
            id: 3,
            label: '电控学院'
        },{
          id: 4,
          label: '某某学院'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },



<style lang="less>
// el-tree样式开始
  .treeFather {
    max-height: 400px;
    overflow: auto;
    .custom-tree-node {
      .svg-icon {
        color:#02C2B0;
      }
    }
  }
  .departmentTree {
    overflow: hidden;
  }
  .el-tree-node:before {
    position: absolute;
    content: "";
    left: -18px;
    top: -24px;
    height: 100%;
    width: 0px;
    border-width: 1px;
    border-left: 1px dashed #D8D8D8;
  }
  .el-tree-node__label {
    line-height: 16px;
    font-size: 16px;
  }
  // 取消悬停和激活状态的背景色
  .el-tree-node:focus > .el-tree-node__content {
    background-color: transparent;
    
  }
  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content,
  .el-tree-node__content:hover {
    background-color: transparent;
  }

  // 第一级树竖着的虚线
  .el-tree {
    &>.el-tree-node:nth-last-child(2) {
      &:before {
        visibility: hidden;
      }
    }
    &>.el-tree-node {
      position: relative;
      &>.el-tree-node__content {
        .el-tree-node__expand-icon:before {
          visibility: hidden;
        }
      }
    }
  }
  // 使超出的虚线可显示
  .el-tree-node>.el-tree-node__children {
    overflow: visible;
  }
  // 加减号、上虚线、左虚线
  .el-tree-node__expand-icon {
    width: 16px;
    height: 16px;
    padding: 0;
    margin-right: 10px;
    background: url("~@/assets/images/icon_plus.png") center no-repeat;
    position: relative;
    &:after {
      position: absolute;
      content: "";
      left: -18px;
      top: 8px;
      width: 18px;
      height: 0px;
      border-width: 1px;
      border-top: 1px dashed #D8D8D8;
    }
    &:before {
      position: absolute;
      content: "";
      left: -18px;
      top: -32px;
      height: 40px;
      width: 0px;
      border-width: 1px;
      border-left: 1px dashed #D8D8D8;
    }
  }
  .el-tree-node__children {
    & > .el-tree-node:first-child {
      & > .el-tree-node__content {
        & > .el-tree-node__expand-icon.is-leaf {
          &:before {
            top: -32px;
            height: 40px;
          }
        }
      }
    }
  }
  // 隐藏第一层的虚线
  .el-tree > .el-tree-node > .el-tree-node__content > .el-tree-node__expand-icon {
    &:before,
    &:after {
      display: none;
    }
  }
  // 将原来的箭头改为加减号图片
  .el-tree-node__expand-icon.expanded {
    transform: rotate(0deg);
    background: url("~@/assets/images/icon_reduce.png") center no-repeat;
  }
  .el-tree-node__expand-icon.is-leaf {
    width: 0;
    padding: 0;
    margin-right: 0;
    &:before {
      top: -40px;
      height: 48px;
    }
  }
  
  .el-tree-node__content {
    padding-left: 0 !important;
    height: 48px;
  }
  .el-tree-node__children {
    .el-tree-node {
      position: relative;
      padding-left: 26px;
    }
  }
  // el-tree样式结束
</style>