修改a-tree的自定义图标

a-tree自定义图标

a-tree自定义图标(官网)

<a-tree
   :tree-data="treeData"  //树形结构数据 
   show-icon //是否展示树节点文字前的图标
   default-expand-all //默认展开所有子节点
>
	<a-icon slot="switcherIcon" type="down" />
    <a-icon slot="smile" type="smile-o" />
</a-tree>

修改图标

• 修改tree的图标是根据antdvue的icon库中的图标
• 也可以使用阿里巴巴矢量库的自定义图标

实例图片

这种树结构的图标父节点旁边都带有箭头框,在项目中影响美观,所以带有这个箭头的图标不推荐使用

a-tree自定义图标(修改)

<a-tree
     show-line // 是否展示节点的连线 ----修改不带有箭头的图标这个属性必填
     show-icon //是否展示图标 
     :tree-data="TreeDatas"
      blockNode //是否节点占据一行
      class="treeClass"
>                
</a-tree>

//修改tree图标代码  /deep/为深度选择器 可以scss/less预处理器中使用，在css中可使用 '>>>'代替
  .treeClass {
    //a-tree图标
    /deep/.ant-tree-switcher {
      background: url(./img/images/jia.png) no-repeat 100% 100%;
    }
    /deep/.ant-tree-switcher-noop {
      background: url(./img/images/jian.png) no-repeat 100% 100%;
    }
    /deep/.ant-tree-switcher-line-icon {
      display: none; 
    }
  }
  /*隐藏树的默认竖线*/
  /deep/.treeClass.ant-tree-show-line li:not(:last-child):before {
    border-left: 0px;
  }

示例图片