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' },
								}
							],
						},
					],
				},
			],

*效果图如下：