vue修改element-ui默认的el-tree样式

先说目标： 1、左边的小三角，放到右边 2、左边添加一个小图标 效果如下：

实现如下：

JS部分

<template>
<div class="tree-box">
    <el-tree
      :data="treeData"
      class="tree"
      node-key="id"
      :default-expanded-keys="[2, 3]"
      :default-checked-keys="[5]"
    >
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span>
          <i v-if="data.icon" :class="'tree-icon iconfont ' + data.icon " />
          <span class="tree-text">{{ node.label }}</span>
        </span>
      </span>
    </el-tree>
  </div>
 </template>
 
 treeData: [{
        id: 1,
        label: 'XX有限公司',
        icon: 'icon-ren',
        children: [
          {
            id: 8,
            label: '二级1111'
          },
          {
            id: 3,
            label: '二级222',
            children: [{
              id: 4,
              label: '三级 3-1-1'
            }, {
              id: 5,
              label: '三级 3-1-2',
              disabled: true
            }]
          },
          {
            id: 2,
            label: '二级333',
            children: [{
              id: 6,
              label: '三级 3-2-1'
            }, {
              id: 7,
              label: '三级 3-2-2'
            }]
          }]
      }],

CSS样式部分

.tree-box{
  padding: 0 10px 5px;
  background-color: #fff;
  
  .tree{
    .tree-icon{
      margin-right: 8px;
    }
    .tree-text{
      color: #333;
      font-size: 14px;
    }
    ::v-deep .el-tree-node__expand-icon {
      position: absolute;
      right: 0;
      color: #999;
      font-size: 14px;
    }
    //没有子节点
    ::v-deep .el-tree-node__expand-icon.is-leaf::before {
      content: '';
    }
  }
}