【vue】el-tree 自定义图标 小三角在右边

【vue】el-tree 自定义图标 小三角在右边

<el-tree
     class="filter-tree"
     :data="treeData"
     :props="defaultProps"
     :check-strictly="true"
     show-checkbox
     :filter-node-method="filterNode"
     :render-after-expand="false"
     node-key="id"
     @check-change="handleCheckChange"
     :default-expanded-keys="defaultexpanded"
     :default-checked-keys="defaultkeys"
     ref="tree"
     >
     <span class="custom-tree-node" slot-scope="{ node, data }">
         <span>
             <i v-if="data.children&&data.children.length>0" class="el-icon-folder" style="padding-right:5px;"/>
             <i v-else/>{{ node.label }}
             //这块或者
              <!-- <i class="el-icon-folder"></i>{{ node.label }}-->
          </span>
     </span>
</el-tree>

但是，一定要注意树的格式。不详细展开来，官网都有例子。
https://element.eleme.cn/#/zh-CN/component/tree#scoped-slot.

如何小三角在右边

主要代码

filter-tree >>> .el-tree-node__expand-icon {
  position: absolute;
  right: 2%;
}

也可更换小三角的图标，在el-tree中添加以下样式就可以了

icon-class=“el-icon-folder”