zoukankan      html  css  js  c++  java
  • elment-ui——tree自定义父子节点图标

    参考:https://juejin.im/post/6844903839468879880

    效果

    方式——通过css样式修改

      法一 :设置为图片(将content值修改为' ',设置背景图),效果如上图

    <style scoped> 
     /* el-tree为tree的类名 */ 
    
     /* 去掉旋转效果 */
      .el-tree >>> .el-tree-node__expand-icon.expanded {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
    
      /* 未展开父节点 */
      .el-tree >>> :not(.is-leaf).el-icon-caret-right:before {
        background: url("../../assets/images/add-circle.png") no-repeat;
        content: '';
        display: block;
         18px;
        height: 18px;
        font-size: 18px;
        background-size: 100% 100%;
      }
    
      /* 已展开父节点 */
      .el-tree >>> .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
        background: url("../../assets/images/minus-circle.png") no-repeat;
        content: '';
        display: block;
         18px;
        height: 18px;
        font-size: 18px;
        background-size: 100% 100%;
      }
    
      /* 子节点 */
      .el-tree >>> .is-leaf.el-icon-caret-right:before {
        background: url("../../assets/images/file-common.png") no-repeat;
        content: '';
        display: block;
         18px;
        height: 18px;
        font-size: 18px;
        background-size: 100% 100%;
      }
    </style>

      法二: 修改图标(引入图标库,修改content的值)

    <style scoped> 
     /* el-tree为tree的类名 */ 
    
     /* 去掉旋转效果 */
      .el-tree >>> .el-tree-node__expand-icon.expanded {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
    
      /* 未展开父节点 */
      .el-tree >>> :not(.is-leaf).el-icon-caret-right:before {
        content: '***';
      }
    
      /* 已展开父节点 */
      .el-tree >>> .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
        content: '***';
      }
    
      /* 子节点 */
      .el-tree >>> .is-leaf.el-icon-caret-right:before {
        content: ''***;
      }
    </style>
  • 相关阅读:
    div常用设置
    Chrome-Charset——Chrome最新版右键工具中的编码修改功能没有了的解决工具
    PHP数据访问(面向对象方式:mysqli类)
    JSON
    jQuery
    jQuery事件
    会话保持
    查询的例子,房屋租赁
    PHP CRUD
    批量删除
  • 原文地址:https://www.cnblogs.com/linjiangxian/p/13827256.html
Copyright © 2011-2022 走看看