Ant Design Vue（版本2.2.8） 中a-tree组件自定义使用方法

最近做vue3 + Ant 项目时需要新写一个附件树类型的附件上传组件，不写不知道，一写才发现困难重重，首先

1.一定要核对ant版本，ant更新改动是比较多的，版本不对，很多方法使用有区别（2.0网址Ant Design Vue）

2.csdn搜索出来可能因版本原因，有很多种自定义树实现方式，还有不少是需要付费的

确定目标实现一个自定义的附件树结构，从ant中引入对应组件

官方的长这样，官方的data数据是直接写的，感觉不方便开发者理解

我的目标

 

我选用了a-directory-tree组件较于a-tree多了头部的的文件图标，listData是后端返回树形结构数据，

replaceFields ：{children:'children', title:'title', key:'key' } 可根据自己数据自定义相应参数名

            <a-directory-tree
                ref="treeRef"
                :tree-data="listData"
                :replaceFields="fieldNames"
                key="nodeId"
                v-model:selectedKeys="checkedKeys"
                @select="handleNodeClick"
                show-icon>

            </a-directory-tree>

其中templete是重中之重，#title 是可将数据引入插槽的方法，其中maustUpload，nodeName是后端返回数据中，必传附件标识，节点名称

                <template #title="{ mustUpload, nodeName }">
                    <template v-if="mustUpload == true">
                        <span class="">{{ nodeName }}</span>
                   <a-badge count="必填":number-style="{backgroundColor: '#f50' }"/>
                    </template>
                    <template v-else>
                        <span class="">{{ nodeName }}</span>
                    </template>
                </template>

templete中可自定义其他内容，修改成自己需要的样式。