业务需求

基于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置空。这样卡槽就完美生效了。