el-tree自定义节点内容使用svg和文本

最近在做需求的时候需要给el-tree的子级项和父级项增加不同的svg图标和文本，但官方给的icon-class属性只能使用官方图标且修改全部的节点，不满足公司需求，于是参考了官方给的自定义节点内容 scoped slot，使用 scoped slot 会传入两个参数node和data，分别表示当前节点的 Node 对象和当前节点的数据。
效果如下：

代码如下：

          <el-tree :data="baseTableList"
                   :props="baseTableListProps"
                   :highlight-current="true"
                   @node-click="nodeClick">
            <span class="treeSpan" slot-scope="{ node, data }">
              <svg-icon v-if="!data.child" icon-class="tree-table" />
              <svg-icon v-else-if="node.expanded" icon-class="tree-file" />
              <svg-icon v-else icon-class="tree-file"/>
              <span :title='node.label || "-"'>{{node.label}}</span>
            </span>
          </el-tree>

svg-icon是自己定义的一个svg图标组件，根据当前节点的Node对象去判断需要展示哪些svg图标，同理也可以展示不同层级的文本；

参考：https://www.jianshu.com/p/fb6686c0ae60