ant-design-vue自定义a-tree组件

要做一个树形结构的页面，但是设计稿和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调整，基本完成。