ant-design-vue中 a-tree 修改show-line自带的图标

基于ant-design-vue中a-tree 修改show-line自带的图标 官方给的这版 也可以修改 不过他的树 不是json数据的树 而是通过a-tree-node渲染的 然后使用插槽控制switcherIcon修改了图标

<a-tree-node key="0-0-2-1" title="leaf">
   <a-icon slot="switcherIcon" type="form" />
</a-tree-node>

json数据下渲染的tree如何修改了 ？废话不多说先上代码

代码如下：

<a-tree 
	:tree-data="treeData"
	show-line
>
	//通过switcherIcon修改只能修改所有父级的图标,子级不受影响
	<a-icon slot="switcherIcon" type="form" />
	//此时子级定义一个插槽来修改子级图标
  	<a-icon slot="child" type="video-camera" />
</a-tree>

通过scopedSlots来实现 在json数据中给scopedSlots将child映射到switcherIcon上 就能修改到子级图标了 json数据：

treeData: [
			{
          
   
				title: 下管街道,
				key: 0,
				children: [
						{
          
   
							title: 金星社区,
							key: 0-0,
							children: [
								{
          
   
									title: 环球中心设备,
									key: 0-0-0,
									scopedSlots: {
          
    switcherIcon:child },
								},
							],
						},
						{
          
   
							title: 和平社区,
							key: 0-1,
							children: [
								{
          
   
									title: 春山路监控,
									key: 0-1-0,
									scopedSlots: {
          
   switcherIcon:child },
								}
							],
						},
					],
				},
			],