elementUI el-tree 自定义节点图标

elementUI el-tree 自定义节点图标_第1张图片

elementUI el-tree 自定义节点图标_第2张图片

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

      
         
                  
                   
                   
                        
                    {{ node.label }}
                
              

 
//以下是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;
}

你可能感兴趣的:(ElementUI,elementui,vue.js,javascript)