ant-design在tree的每个item的右边显示自定义的按钮，代码如下：
<a-tree :tree-data="treeData" default-expand-all show-icon :default-selected-keys="['0-0-0']">
<a-icon slot="apartment" type="apartment" style="color:#1890ff" />
<a-icon slot="file-text" type="file-text" />
<template slot="custom" slot-scope="item">
<span>{{ item.title }}</span>
<span class="but_operation">
<span class="but_type" @click="()=> append(item)">编辑</span>
<span class="but_type" style="right:120px;" @click="()=> edit(item)">删除</span>
<span class="but_type" @click="(e)=> remove(item)">新建</span>
</span>
</template>
</a-tree>// 树形菜单数据
treeData: [
{
title: '全部',
key: '0-0',
slots: { icon: 'apartment' },
children: [
{
title: '德风石化有限公司',
key: '0-0-0',
slots: { icon: 'apartment' },
children: [
{
title: '公共工程',
key: '0-0-0-0',
slots: { icon: 'apartment' },
children: [
{
title: '中心控制室',
key: '0-0-0-0-0',
scopedSlots: { icon: 'file-text', title: 'custom' }
},
{ title: '辅料管区', key: '0-0-0-0-1', scopedSlots: { icon: 'file-text', title: 'custom' } },
{ title: 'PSA伐区', key: '0-0-0-0-2', scopedSlots: { icon: 'file-text', title: 'custom' } },
{ title: '导热油房区', key: '0-0-0-0-3', scopedSlots: { icon: 'file-text', title: 'custom' } },
{ title: '甲醇裂解区', key: '0-0-0-0-4', scopedSlots: { icon: 'file-text', title: 'custom' } },
{ title: '机柜间', key: '0-0-0-0-5', scopedSlots: { icon: 'file-text', title: 'custom' } }
]
},
{ title: '污水处理站', key: '0-0-0-1', scopedSlots: { icon: 'apartment' } }
]
}
// { title: 'leaf', key: '0-0-1', scopedSlots: { icon: 'apartment' } }
]
}
],.but_type {
color: #1890ff;
cursor: pointer;
padding-left: 5px;
padding-right: 5px;
}
/*修改全局a-tree样式*/
.ant-tree {
position: relative;
}
.ant-tree > li span.ant-tree-node-content-wrapper::before,
.ant-tree .ant-tree-child-tree > li span.ant-tree-node-content-wrapper::before{
position: absolute;
right: 0;
left: 0;
height: 24px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
content: '';
}
.ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected::before{
background: rgba(173, 224, 251, 0.4);
}
.ant-tree li .ant-tree-node-content-wrapper:hover {
background-color: transparent;
color: #000;
}
.ant-tree li .ant-tree-node-content-wrapper:hover .but_operation {
opacity: 1;
}
.ant-tree li .ant-tree-node-content-wrapper:hover.ant-tree-node-content-wrapper-normal::before,
.ant-tree li .ant-tree-node-content-wrapper:hover.ant-tree-node-content-wrapper::before{
background: rgba(173, 224, 251, 0.4);
color: #000;
}
.ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected{
background: transparent;
}
.ant-tree > li span.ant-tree-node-content-wrapper.ant-tree-node-selected {
color: #000;
background: transparent;
}
.ant-tree li span.ant-tree-switcher {
z-index: 1;
}