右键点击树组件中的节点,弹出增删改的菜单,要求菜单总是在点击位置的附近

目标
右键点击树组件中的节点,弹出增删改的菜单,要求菜单总是在点击位置的附近

先添加一个树
<template>
    <div>
        <el-tree
            <!-- 绑定数据 -->
            :data="tree"
            highlight-current
            node-key="id"
            :props="{
   
                children: 'children',
                label: 'name'
            }"
            ref="tree"
        >
        </el-tree>
    </div>
</template>
添加数据
export default {
   
    data() {
   
        return {
   
            tree: [
                {
   
                    id: 1,
                    name: '北京',
                    children: [
                        {
   
                            id: 5,
                            name: '朝阳',
                            children: [
                                {
   
                                    id: 17,
                                    name: '双塔',
                                    children: []
                                },
                                {
   
                                    id: 18,
                                    name: '龙城',
                                    children: []
                                }
                            ]
                        },
                        {
   
                            id: 6,
                            name: '丰台',
                            children: [
                                {
   
                                    id: 19,
                                    name: '新村',
                                    children: []
                                },
                                {
   
                                    id: 20,
                                    name: '大红门',
                                    children: []
                                },
                                {
   
                                    id: 21,
                                    name: '长辛店',
                                    children: [
                                        {
   
                                            id: 22,
                                            name: '东山坡',
                                            children: []
                                        },
                                        {
   
                                            id: 23,
                                            name: '北关',
                                            children: []
                                        },
                                        {
   
                                            id: 24,
                                            name: '光明里',
                                            children: []
                                        },
                                        {
   
                                            id: 25,
                                            name: '赵辛店',
                                            children: []
                                        },
                                        {
   
                                            id: 26,
                                            name: '西峰寺',
                                            children: []
                                        }
                                    ]
                                }
                            ]
                        },
                        {
   
                            id: 7,
                            name: '海淀',
                            children: []
                        },
                        {
   
                            id: 8,
                            name: '房山',
                            children: []
                        },
                        {
   
                            id: 10,
                            name: '顺义',
                            children: []
                        }
                    ]
                },
                {
   
                    id: 2,
                    name: '上海',
                    children: [
                        {
   
                            id: 11,
                            name: '黄埔',
                            children: []
                        },
                        {
   
                            id: 12,
                            name: '徐汇',
                            children: []
                        }
                    ]
                },
                {
   
                    id: 3,
                    name: '广州',
                    children: [
                        {
   
                            id: 13,
                            name: '荔湾',
                            children: []
                        },
                        {
   
                            id: 14,
                            name: '白云',
                            children: []
                        },
                        {
   
                            id: 15,
                            name: '越秀',
                            children: []
                        },
                        {
   
                            id: 16,
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值