前端antd树形控件a-tree同时实现图标和节点都能动态(根据数据属性)切换显示

1.工作中遇到这样一个需求，文件树中的材料需要根据材料状态显示不同的图标，这个需求是比较普通的，有好几种实现方式。

[1]比如给a-tree传treedata自动构建，a-tree内部写图标对应slot，同时传的treedata数据内部对象属性加上slots:{icon:'slot的值'}。

    <a-tree show-icon :tree-data="data1">
        <a-icon slot="a" type="home"/>
        <a-icon slot="b" type="smile"/>
    </a-tree>

data1: [
                {
                    key: '0',
                    title: '0',
                    slots: {
                        icon: 'a'
                    }
                },
                {
                    key: '1',
                    title: '1',
                    slots: {
                        icon: 'b'
                    }
                },
            ]

[2]或者把a-tree-node节点写出来，里面写上对应的图标。也可以a-tree-node用v-for搭配数据，图标依然是这个写法，但是比上一个的缺点是图标不能根据数据的属性动态选择，只能写死(个人遇到的问题1：即使数据里写了slots对象属性，但是节点自己写出来，这样是用不了slots的)。

    <a-tree show-icon>
        <a-tree-node key="0" title="0">
            <a-icon slot="icon" type="home"/>
        </a-tree-node>
        <a-tree-node key="1" title="1">
            <a-icon slot="icon" type="smile"/>
        </a-tree-node>
    </a-tree>

2.显然对于显示不同图标的需求，用第一种[1]方式更好实现。但是同时还有可能一部分节点有切换显示的需求(可能这个需求比较少见，我也不一定用到，但是写的时候就得考虑到拓展性，如果用到要可以基于现在的基础实现)，比如已退回的材料和未退回的材料，可以用v-show指令控制，但是问题来了，第一种方式节点没有写出来，怎么用v-show根据数据内容控制显示隐藏呢？(个人遇到的问题2：如果不把vue指令v-show写在元素属性上，是没办法用的，元素的属性不能或者是我不知道怎么通过js代码或者说数据来传递上去)。

3.要同时实现这2个需求，首先想到几个比较笨的解决办法(请不要照做)。

[1]拷贝一份原始数据，接着在切换显示时，遍历用于显示的数据，删除其中要隐藏不显示节点的数据。等到再次切换，再根据原始数据，取出另一部分显示。

[2]把未退回材料和已退回材料分成2部分数据，分别建2棵树显示。

4.由于前端学的浅不怎么会，绞尽脑汁才想起slot部分并不是只能写一个元素<a-icon>，而是可以写多个元素的，进而想到可不可以在slot元素范围内写多个元素并给它们标上v-show，从而在写出a-tree-node(为了实现第二个需求-节点用v-show根据数据内容切换显示)的同时，也能够动态的根据数据内容选择不同的图标显示呢？试了一下终于实现了(同理title也可以这么做)。同时，数据属性也可以不必写slots.icon了，换成别的也行。

    <a-tree show-icon>
        <a-tree-node v-show="node.key=='0'" v-for="node in data1" :key="node.key">
            <span slot="icon">
                <span><a-icon v-show="node.slots.icon=='a'" type="home"/></span>
                <span><a-icon v-show="node.slots.icon=='b'" type="smile"/></span>
            </span>
            <span slot="title">
                <span>111</span>
            </span>
        </a-tree-node>
    </a-tree>

data1: [
                {
                    key: '0',
                    title: '0',
                    slots: {
                        icon: 'a'
                    }
                },
                {
                    key: '1',
                    title: '1',
                    slots: {
                        icon: 'b'
                    }
                },
            ]

5.总结：就a-tree控件而言，数据属性和元素属性可能是难以互通的，但是可以通过在slot元素里用vue指令根据数据内容控制元素内容的方式，来折中的实现同时控制节点和图标的显示。