2023年6月22日发(作者：)

与ant-design-vuetree组件⾃定义图标的相爱相杀与 ant-design-vue tree 组件⾃定义图标的相爱相杀⽂章⽬录1. 最近遇到了在 tree 组件中需要⽤到⾃定义 icon 图标的需求 给出的需求是：返回数据的节点

类型 是不同的，要根据不同类型加不同图标展⽰这⾥，我看到 tree 组件的⾃定义图标是通过

slots 属性或

scopedSlots 属性 (当时也没细细⽐较⼆者的区别，后者好像可以在template 结构⾥通过

slot-scope 拿到 slot 匹配到的数据源) 来区分匹配的，所以就想到，拿到数据就先根据类型给每个节点加⼀个插槽识别属性作为 slot 匹配点, 这⾥使⽤递归插⼊的⽅式处理/**返回数据格式⼤致为：[ { label: "parentNode", id: "parent001", type: "Folder", subType: "Folder", children: [ { label: "childNode", id: "children001", type: "Point", subType: "Interval", children: [ { // ...

更多的层 } ] }, ] }, { label: "parentNode", id: "parent101", type: "Folder", subType: "Folder", children: [] }]*///

节点类型是由 type

和 subType

组合决定的function recursion(dataArray){ let res = []; h(item => { Slots = { icon: ype(, e) }; //

因为是在 vue2

单组件⽂件中写的，所以这⾥有个 this (item); if(!children || !) return; ion(en); }); return res;}//

匹配类型返回 icon

的值matchType(type, subType){ const typeStr = type + subType; //

⽤ typeStr

也可以⽤ switch case

匹配 if(type === "Folder"){ // type

为 Folder

只有这⼀种类型(这是与后台协商好类型匹配字段) return "Folder"; }else if(typeStr === "PointInterval"){ return "pointInterval"; } // ...

其他 6

种类型 //

写到这⼉，突然想到

直接返回 type + subType

的值不就好了！还免得那么多判断}傻了， 傻了 ~~~ 我去改⼀下项⽬代码，马上回来============================== 认真的分割线 ==============================//

上⾯的⽅法改成这个写法function recursion(dataArray){ let res = []; h(item => { Slots = { icon: + e }; (item); if(!children || !) return; ion(en); }); return res;}//

只要 slot

匹配上返回节点 type + subType

的值即可2. 上⾯的数据请求到，就递归插⼊⼀个属性

scopedSlots:{ icon: <对应的数据点类型> } 备⽤：const id = //

就是那啥啥请求必要的参数 eNodeData({ //

这个⽅法你⾃⼰封装⼀下 axios，在引⼊后再封装调⽤就⾏ id}).then(res => { if(s){ deData = ion(); //

这⾥递归处理⼀下 } // other handle code ...}).catch( err => { // handle error message code ...});⽤官⽅图标测试⼀下： 3. 接下来，就是 ⾃定义图标 了官⽅给出的⾃定义图标的解决⽅案是：// 利⽤ Icon 组件封装⼀个可复⽤的⾃定义图标。可以通过 components 属性传⼊⼀个组件来渲染最终的图标，以满⾜特定的需求。好嘞，这还没涉及插槽呢，试试能不能⽤ ~因为是基于现有项⽬的⼆次开发，ant-design-vue 的版本是

1.5.2, 不知道与版本有关系没好家伙，不加载图标，直接报错(⼤致意思就是模板编译器不可⽤)， 如图：好嘛，那试试

jsx 跟

render 函数：到这⼀步，⾃定义⼩爱⼼图标是展⽰出来了，页⾯上也没看出有什么问题，但是咱得看看还有啥问题没嗯，⾃找⿇烦 ?! 来了，看图：意思是

slot 作为保留字，不能被⽤作组件的 prop 属性；再来尝试替换

slot props 名为

slotCont 或者任意其他名字, 直接看写法吧（其他省略了哈）:好嘛，⼩图标⼜跑了，⼜不显⽰了 OMG …好嘞，再试试