AntDesignVueTreeSelect组件⾃定义图标icon
业务需求
基于Ant Design Vue1.7.8版本。需要在TreeSelect 树型选择控件中根据不同的数据类型前⾯加不同的ICON图标。效果
代码
<div class="list-box">
<div>
<a-tree-select
v-model="treeValue"
:dropdown-
icon图标库:tree-data="topNode"
placeholder="请选择图层列表"
tree-default-expand-all
@select="selectChange"
>
<template  slot="title"slot-scope="item">
<span v-if="pe==='点'"><svg  t="1631067464065"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="/200 0/svg"p-id="4513"width="12"height="12"><path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"p-id="4514"></path></svg>
{{item.titleText}}
</span>
<span v-if="pe==='线'"><svg t="1631073872587"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="/200 0/svg"p-id="10746"width="16"height="16"><path d="M0 0h1024v1024H0z"fill="#FFFFFF"opacity=".01"p-id="10747"></path><path d="M335.644444 80 4.977778c-14.222222 0-25.6-8.533333-31.288888-19.911111L164.977778 489.244444c-8.533333-17.066667 0-36.977778 17.066666-45.511111 17.06 6667-8.533333 36.977778 0 45.511112 17.066667l128 270.222222 210.488888-51.2-139.377777-275.911111c-5.688889-14.222222-2.844444-28.4444 44 5.688889-39.822222L625.777778 173.511111c5.688889-5.688889 17.066667-11.377778 25.6-8.533333 8.533333 0 17.066667 5.688889 25.6 11.37 7778l176.355555 207.644444c11.377778 14.222222 11.377778 36.977778-2.844444 48.355556-14.222222 11.37777
8-36.977778 11.377778-48.35555 6-2.844445l-150.755555-179.2-147.911111 147.911111 145.066666 290.133334c5.688889 8.533333 5.688889 19.911111 0 28.444444-5.688889 8.533 333-11.377778 17.066667-22.755555 19.911111l-278.755556 71.111111c-5.688889-2.844444-8.533333-2.844444-11.377778-2.844444z"fill="#0045E1" p-id="10748"></path></svg>
{{item.titleText}}
</span>
<span v-if="pe==='⾯'"><svg t="1631073914328"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="/200 0/svg"p-id="11913"width="16"height="16"><path d="M896 801.632V222.368c36.48-7.424 64-39.744 64-78.368C960 99.904 924.128 64 880 64c-38.656 0-70.944 27.52-78.368 64H222.368A80.096 80.096 0 0 0 144 64 80.096 80.096 0 0 0 64 144c0 38.624 27.52 70.944 64 78.368V801.6c-36.48 7.424-64 39.744-64 78.368A80.096 80.096 0 0 0 144 960c38.624 0 70.944-27.52 78.368-64H801.6c7.424 36.48 39.744 64 78.368 64A80 80 0 1 0 896 801.632z m -704 14.784V207.584c5.888-4.448 11.136-9.696 15.584-15.584h608.8c4.48 5.888 9.696 11.136 15.584 15.584v608.8c-5.92 4.48-11.136 9.696-15.616 1 5.616H207.584A79.04 79.04 0 0 0 192 816.416z"p-id="11914"></path></svg>
{{item.titleText}}
</span>
</template>
</a-tree-select>
</div>
</div>
JS代码
getAssetTreeData(){
getListCoverageTree({}).then(res =>{
let scopes={title:'title'}
res.data.forEach(item=>{
item.scopedSlots=scopes
item.titleText = item.title
item.title =null
if(item.children){
for(let a=0;a<item.children.length;a++){
item.children[a].scopedSlots=scopes
item.children[a].titleText=item.children[a].title
item.children[a].title=null
}
}
})
});
},
总结部分问题
为什么⽤置空title? 因为我发现如果不置空，这个插槽⾃定义ICON图标⼀直不⽣效，应该是冲突了。
title属性为节点显⽰的内容。所以肯定不能不要嘛，后⾯换了种思路，⽤forEach遍历数据集合种顺便往集合种加⼊scopedSlots属性，并且将title值转存给⼀个替代值titleText。再将title置空。这样卡槽就完美⽣效了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。