elementUI el-tree 自定义节点图标

在tree得代码中加入自定义的icon即可,(需判断树得节点)

      
         <el-tree
                :highlight-current="true"
                :data="deptOptions"
                :props="defaultProps"
                node-key="id"
                :expand-on-click-node="false"
                auto-expand-parent
                :current-node-key="isnochirlden.id"
                ref="tree"
                @node-click="handleNodeClick"
              >
                  <span class="span-ellipsis" slot-scope="{ node,data }">
                   <i v-if="data.$treeNodeId==1" class="el-icon-tree"></i>
                   <i v-else-if="data.children" class="el-icon-folder"></i>
                        <i v-else class="el-icon-file"></i>
                    <span :title="node.label">{{ node.label }}</span>
                </span>
              </el-tree>

 
//以下是css代码 ，自定义得el-icon图标     系统开发得话可以在main.js中引入icon字体

::v-deep .el-icon-folder {
  background: url("~@/assets/images/drawer/folder.png") center no-repeat;
  font-size: 16px;
  background-size: cover;
}
::v-deep .el-icon-folder:before {
  content: "替";
  font-size: 16px;
  visibility: hidden;
}
::v-deep .el-icon-file {
  background: url("~@/assets/images/drawer/file.png") center no-repeat;
  font-size: 16px;
  background-size: cover;
}
::v-deep .el-icon-file:before {
  content: "替";
  font-size: 16px;
  visibility: hidden;
}
::v-deep .el-icon-tree {
  background: url("~@/assets/images/drawer/tree.png") center no-repeat;
  font-size: 16px;
  background-size: cover;
}
::v-deep .el-icon-tree:before {
  content: "替";
  font-size: 16px;
  visibility: hidden;
}