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指令根据数据内容控制元素内容的方式，来折中的实现同时控制节点和图标的显示。
