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

最新推荐文章于 2024-09-19 16:49:00 发布

苏七的猫

最新推荐文章于 2024-09-19 16:49:00 发布

阅读量2k

点赞数

分类专栏： vue 文章标签： vue antd vue

本文链接：https://blog.youkuaiyun.com/pacholy/article/details/115252209

版权

效果展示：
在这里插入图片描述
思路：

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