要做一个树形结构的页面，但是设计稿和ant-design-vue提供的tree组件不太一样，研究之后发现需要使用vue插槽技术来改变tree组件原本的样式。
就像官网上tree组件有提供自定义图标的案例：
根据这个案例可以看到利用slot属性把对应的DOM结构放进<template></template>标签里面来实现自定义化。
我的代码：
效果：
设计稿的一级标题带有灰色数字，结构上就得和标题分开；二级标题后面需要有按钮，而且要鼠标滑入才显示。
思路：一级标题的数据json里加上scopedSlots属性，
scopedSlots: {
title: 'number',
}
template标签里slot判断有number值时就渲染<span class="parentTitle">通用标题<span class="parentNum">(2)</span></span>这样的DOM结构；
二级标题的数据json里加上scopedSlots属性，
scopedSlots: {
title: 'custom',
}
template标签里slot判断有custom值时就渲染
<div @mouseenter="menuEnter(item)" @mouseleave="menuLeave" @click="gotoDetail(item)" class="childDiv">
<span class="childTitle">
第二选项任务
</span>
<a-space @click.stop v-show="currentId == item.key" class="childBtn">
<span class="menu_li_add" @click="handleAddOption(item)">添加</span>
</a-space>
</div>这样的DOM结构；
要滑入滑出，得在包裹的div上加mouseenter，mouseleave方法，控制currentId变量，用currentId控制按钮是否显示。
最后做css调整，基本完成。
