Vue使用Ant design中a-tree的scopedSlots实现树标题的前后都有icon图标

<a-tree style="width:100%" :tree-data="treeData" show-icon :default-selected-keys="[treeData[0].key]">
	<!-- 每项 最前面的 箭头的 icon -->
    <a-icon slot="switcherIcon" type="caret-down" />
    <!-- slot="praent" 配合 treeData数据中的 slots 设置目录下 的 icon -->
    <a-icon slot="praent" style="color:#0DD3FF" type="folder-open" />
    <!-- slot="child" 配合 treeData数据children下的 slots 设置children目录 的 icon -->
    <a-icon slot="child" style="color:#FED037" type="folder-open" />
    <!-- 数据中 每个 节点 的 scopedSlots 字段(插槽) 用来设置 所有(子父节点)节点  的 统一的 icon-->
    <template slot="handle" slot-scope="item">
       <!--item.title 为treeData的 title 字段-->
       <span>{{item.title}}</span>
       <a-icon 
         style="position:absolute;right: 0;" 
         @click.stop="treeHandleClick" 
         type="ellipsis" />
     </template>
</a-tree>

<script>
const treeData = [
  {
    title: 'parent 1',
    key: '0-0',
    slots: {icon: 'praent',},
    // ⚠️重点这这里⚠️每一条数据上都添加scopedSlots属性
    scopedSlots:{title:"handle"},
    children: [
      { 
        title: 'leaf', 
        key: '0-0-0', 
        slots: { icon: 'child' },
        scopedSlots:{title:"handle"},
        children: [
          { 
            title: 'leaf', 
            key: '0-0-0-0', 
            slots: { icon: 'child' } ,
            scopedSlots:{title:"handle"},
          },
        ]
      },
    ],
  },
];
</script>

剩下的 样式 根据需求 自己调试
有更好的 方法 欢迎探讨
如果后台数据和 a-tree组件 的 字段对不上 可以用replaceFields