效果展示:
思路:
右边的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>