先放element默认样式及代码：

需要实现的样式如下图：

这里提一下，动态添加图标使用的是 Slot 自定义树节点的内容,需要注意的是自定义树节点的内容，参数为 { node, data }

设置文字及图表样式可通过添加自定义类名设置

<!-- HTML片段 -->
<el-tree class="filter-tree" :data="data" node-key="id" :props="defaultProps" highlight-current default-expand-all :filter-node-method="filterNode" ref="tree" @node-click="handleNodeClick">
    <span slot-scope="{ node, data }" class="span__">
        <!-- <i class="el-icon-folder-opened"></i> -->
        <svg-icon v-if="data.icon" style="font-size: 16px; display: inline;" :icon-class="data.icon" />
        <span class="tree-node-span">{{ node.label }}</span>
    </span>
</el-tree>

<!-- JS部分片段 -->
<script>
  export default {
    data() {
      return {
        data: [{
            id: 2,
            icon: 'folder-blue',
            label: '文件夹一级标题 2',
            children: [{
              id: 5,
              icon: 'folder-blue-item',
              label: '文件夹二级标题 2-1'
            }, {
              id: 6,
              icon: 'folder-blue-item',
              label: '文件夹二级标题 2-2',
              children: [{
                id: 11,
                label: '三级 2-2-1'
              }, {
                id: 12,
                label: '三级 2-2-2'
              }],
           }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>

<!-- CSS片段 -->
// 设置节点行的高度
::v-deep.el-tree-node__content {
    height: 38px;
}
// 设置下拉图标位置
::v-deep.el-tree-node__expand-icon {
    position: absolute;
    right: 1%;
}
// 不使用slot自定义列表时label样式控制
::v-deep.el-tree-node__label {
    padding-left: 15px;
}