Antd vue 树形结构 tree组件的增删功能

效果展示：

思路：

右边的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>