效果展示:
思路:
右边的button用插槽的方式添加
<template>
<div class="m-page">
<div class="content">
<div class="menu-data">
<div class="header">
<span class="name">菜单配置</span>
</div>
<a-tree ref="tree1" checkable :tree-data="treeData" :defaultExpandAll="false" :selectedKeys.sync="selectedKeys" blockNode>
<template v-slot:title="nodeData">
<span>{{nodeData.title}}</span>
<a-button-group style="float:right">
<a-button size="small" @click="addNode(nodeData)">新增下级</a-button>
<a-button size="small" @click="deleteNode(nodeData)">删除</a-button>
</a-button-group>
</template>
</a-tree>
</div>
<div class="menu-config">
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
treeData:[
{
title: '管理',
key: '1',
children: [
{
title: '数据管理',
key: '1-1',
children: [
{ title: 'aaa', key: '1-1-1', disableCheckbox: true },
{ title: 'bbb', key: '1-1-2' },
],
},
{
title: '人员管理',
key: '1-2',
children: [{ title: '第一个', key: '1-2-1' },],
},
],
},
{
title: '展示',
key: '2',
children: [
{
title: '数据展示',
key: '2-1',
children: [
{ title: '内容', key: '2-1-1', disableCheckbox: true },
],
},
],
},
],
selectedKeys: ['1-1'],
}
},
methods: {
addNode(e){
console.log(e)
},
deleteNode(e){
let treeData = this.treeData;
this.treeData = this.deleteParentNode(treeData,e.key);
console.log(this.treeData)
},
has(obj,key){
if(obj.key!==key){
return obj
}
},
deleteParentNode(data,key){
const ret = [];
data.forEach(ele=>{
if(this.has(ele,key)){
if(ele.children){
ele.children = this.deleteParentNode(ele.children,key);
}
ret.push(ele);
}
})
return ret;
},
},
}
</script>
<style class="scoped">
.content{
display: flex;
}
.menu-data{
width: 55%;
padding: 10px;
border-radius: 6px;
border: 1px solid #eee;
}
.menu-config{
width: 45%;
padding: 10px;
border-radius: 6px;
border: 1px solid #eee;
}
.header .name{
font-weight: bold;
color: #888;
}
</style>