Ant Design Vue TreeSelect组件自定义图标icon
业务需求基于Ant Design Vue1.7.8版本。需要在TreeSelect 树型选择控件中根据不同的数据类型前面加不同的ICON图标。效果代码<div class="list-box"><div><a-tree-selectv-model="treeValue"style="width: 200px"
·
业务需求
基于Ant Design Vue1.7.8版本。需要在TreeSelect 树型选择控件中根据不同的数据类型前面加不同的ICON图标。
效果
代码
<div class="list-box">
<div>
<a-tree-select
v-model="treeValue"
style="width: 200px"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
:tree-data="topNode"
placeholder="请选择图层列表"
tree-default-expand-all
@select="selectChange"
>
<template slot="title" slot-scope="item" >
<span v-if="item.type==='点'"><svg t="1631067464065" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/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="item.type==='线'"><svg t="1631073872587" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10746" width="16" height="16"><path d="M0 0h1024v1024H0z" fill="#FFFFFF" opacity=".01" p-id="10747"></path><path d="M335.644444 804.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.066667-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.444444 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.377778l176.355555 207.644444c11.377778 14.222222 11.377778 36.977778-2.844444 48.355556-14.222222 11.377778-36.977778 11.377778-48.355556-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.533333-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="item.type==='面'"><svg t="1631073914328" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/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 15.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 => {
this.topNode = [{key: "-1", title: "数据图层",scopedSlots: {title: 'title'}, type: '幢', children: []}];
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
}
}
})
this.topNode[0].children = res.data;
});
},
总结部分问题
为什么用置空title? 因为我发现如果不置空,这个插槽自定义ICON图标一直不生效,应该是冲突了。
title属性为节点显示的内容。所以肯定不能不要嘛,后面换了种思路,用forEach遍历数据集合种顺便往集合种加入scopedSlots属性,并且将title值转存给一个替代值titleText。再将title置空。这样卡槽就完美生效了。
更多推荐
已为社区贡献1条内容
所有评论(0)