持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

一、【基础】基础树结构

ElementUI 提供了基础的树结构，Element - The world's most popular Vue UI framework 默认效果为：（1）点击节点展开或者收起（2）hover有默认颜色效果。结合案例给出我们的基础树结构，效果代码如下：

已给出整个页面的代码，包含HTML,JS,CSS.其中给出了资源数据，为接口返回数据。

二、优化tree前端样式

step1.【基础】添加箭头

效果说明：（1）包含子节点的需要添加箭头；没有子节点的不需要箭头（2）未展开状态为：右箭头；（3）展开状态为：下箭头；（4）箭头有旋转效果；

// 没有展开且有子节点
.el-tree ::v-deep .el-icon-caret-right:before {
  background: url("~@/assets/images/tree/arrow-right1.png") no-repeat 0 0;
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 3px;
  background-size: 8px 12px;
}
// 已经展开且有子节点
.el-tree
  ::v-deep
  .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  background: url("~@/assets/images/tree/arrow-right1.png") no-repeat 0 0;
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-size: 8px 12px;
}
// 没有子节点
.el-tree ::v-deep.el-tree-node__expand-icon.is-leaf::before {
  background: none;
}

说明：

没有展开且有子节点的类.el-tree ::v-deep .el-icon-caret-right:before

已经展开且有子节点的类 .el-tree ::v-deep .el-tree-node__expand-icon.expanded.el-icon-caret-right:before

没有子节点的类 .el-tree ::v-deep.el-tree-node__expand-icon.is-leaf::before

step2.【进阶】添加分级图标

说明：（暂且最多五层）五层每一层对应不同的图标。

(存在一个小问题：同级目录含有子目录和未含有子目录没有对其（由于箭头区分）)

// 添加图标
.el-tree ::v-deep .el-tree-node__content .el-tree-node__label {
  color: black;
  padding-left: 22px;
  background: url("../../../src/assets/images/tree/icon11.png") no-repeat 0 3px;
  background-size: 13px 13px;
}
.el-tree ::v-deep .el-tree-node__children .el-tree-node__label {
  padding-left: 22px;
  background: url("../../../src/assets/images/tree/icon21.png") no-repeat 0 3px;
  background-size: 13px 13px;
}

说明：

一级目录类.el-tree ::v-deep .el-tree-node__content .el-tree-node__label

二级目录类.el-tree ::v-deep .el-tree-node__children .el-tree-node__label

三级目录类.el-tree ::v-deep .el-tree-node__children .el-tree-node__children .el-tree-node__label

四级目录类.el-tree ::v-deep .el-tree-node__children .el-tree-node__children .el-tree-node__children .el-tree-node__label

五级目录类.el-tree ::v-deep .el-tree-node__children .el-tree-node__children .el-tree-node__children .el-tree-node__children .el-tree-node__label

以此类推

step3.【基础】添加颜色样式

效果说明：（1）添加头部效果（2）添加tree背景颜色（3）修改hover颜色和选中节点颜色

// 资源树-头部标签样式
.treeHead {
  text-align: center;
  // color: #fff;
  font-size: 14px;
  padding: 10px;
  align-items: center;
  border: 1px solid #8db2f3;
  background-color: #8db2f3;
}

step4.【进阶】添加引导线

效果说明：添加一个目录线，如图

// -------------4.添加引导线-----------
.treeBox {
  width: 100%;
}
.treeBox ::v-deep .el-tree > .el-tree-node:after {
  border-top: none;
}
.tree ::v-deep .el-tree-node {
  position: relative;
}
// 节点左边距
.tree ::v-deep .el-tree-node__children {
  padding-left: 15px;
}
.tree ::v-deep .el-tree-node :last-child:before {
  height: 38px;
}
.tree ::v-deep .el-tree > .el-tree-node:before {
  border-left: none;
}
.treeBox ::v-deep .el-tree > .el-tree-node:after {
  border-top: none;
}
// 添加
.tree ::v-deep .el-tree-node:before {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}
 
.tree ::v-deep .el-tree-node:after {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}
 
.tree ::v-deep .el-tree-node:before {
  border-left: 1px dashed #ffffff;
  bottom: 0px;
  height: 100%;
  top: -26px;
  width: 1px;
}
 
.tree ::v-deep .el-tree-node:after {
  border-top: 1px dashed #ffffff;
  height: 20px;
  top: 12px;
  width: 12px;
}

说明： 主要使用.treeBox ::v-deep .el-tree > .el-tree-node:after修改

三、【基础】修改tree配置效果

default-expand-all 默认展开全部节点

:expand-on-click-node="false" 点选节点不做”展开“”收起“操作

node-key="id" 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的

:indent="0" 相邻级节点间的水平缩进，单位为像素

              :data="resourceData.data"
              node-key="id"
              ref="tree"
              default-expand-all
              :expand-on-click-node="false"
              :props="defaultProps"
              :indent="0"
              class="tree"
              style="width: 100%"
            >
</el-tree>

【Vue项目实战7】（上）el-tree==＞添加分级图标==＞添加引导线样式==＞【node-click】点击节点展示全部父节点信息