iview的tree节点点击右键添加下拉操作菜单

iview的tree节点点击右键添加下拉操作菜单

最终效果图

代码

<template>
    <Tree :data="kindData" :render="renderContent"></Tree>
</template>
<script>
import $ from 'jquery/dist/jquery'

    export default {
        data() {
            return {
                kindData: [
                    {
                        "expand": true,
                        "title": "标题一",
                        "id": null,
                        "code": "01",
                        "parentCode": "0",
                        "children": [
                            {
                                "tr_parentCode": "01",
                                "tr_userid": null,
                                "tr_name": "11",
                                "count": "0",
                                "tr_code": "0101",
                                "tr_count": 15,
                                "title": "子节点1",
                                "id": null,
                                "code": "0101",
                                "parentCode": "01",
                                "nodeKey": 1
                            }
                        ],
                        "nodeKey": 0
                    },
                    {
                        "expand": true,
                        "title": "标题二",
                        "id": null,
                        "code": "02",
                        "parentCode": "0",
                        "children": [
                            {
                                "tr_parentCode": "02",
                                "tr_userid": null,
                                "tr_name": "子节点1",
                                "count": "0",
                                "tr_code": "0202",
                                "tr_count": 0,
                                "title": "子节点1",
                                "id": null,
                                "code": "0202",
                                "parentCode": "02",
                                "nodeKey": 3
                            },
                            {
                                "tr_parentCode": "02",
                                "tr_userid": null,
                                "tr_name": "子节点2",
                                "count": "0",
                                "tr_code": "0203",
                                "tr_count": 0,
                                "title": "子节点2",
                                "id": null,
                                "code": "0203",
                                "parentCode": "02",
                                "nodeKey": 4
                            }
                        ],
                        "nodeKey": 2
                    },
                    {
                        "expand": true,
                        "title": "4",
                        "id": null,
                        "code": "07",
                        "parentCode": "0",
                        "children": [
                            {
                                "tr_parentCode": "07",
                                "tr_userid": null,
                                "tr_name": "41",
                                "count": "0",
                                "tr_code": "0700",
                                "tr_count": 23,
                                "title": "41",
                                "id": null,
                                "code": "0700",
                                "parentCode": "07",
                                "nodeKey": 49
                            }
                        ],
                        "nodeKey": 48
                    },
                    {
                        "expand": true,
                        "title": "88888",
                        "id": "1377",
                        "code": "48f84f52884845b999bcf4f3d5978a39",
                        "parentCode": "0",
                        "children": [],
                        "nodeKey": 55
                    }
                ]
            }
        },
        methods: {
            renderContent(h, {root, node, data}) {
                return h('span', {
                    class: 'myMenu',
                    domProps: {
                        id: data.code
                    },
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    },
                    on: {
                        click: ($event) => {
                            $event.stopPropagation();
                        }
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: (data.children && data.children.length > 0) ? 'ios-folder-open' : ''
                            },
                            style: {
                                marginRight: '8px',
                                marginTop: '-3px',
                                color: '#FECB61',
                                fontSize: '18px'
                            }
                        }),

                        //开始
                        h('Dropdown',
                            {
                                props: {transfer: true, trigger: 'contextMenu', placement: 'bottom'},
                                nativeOn: {
                                    mousedown: ($event) => {
                                        $event.stopPropagation();
                                        if ($event.button === 2) {//$event.button === 0鼠标左键    $event.button === 2鼠标右键  $event.button === 1鼠标滚轮
                                            //引入jquery  连续点击右键出下拉菜单，将上一个下拉菜单隐藏
                                            var dropdownMenuId = "dropdown" + $($event.target).attr("id").substring(5);
                                            $("#" + dropdownMenuId).css("display", "block");
                                            $("#" + dropdownMenuId).parent(".ivu-select-dropdown").siblings(".ivu-select-dropdown").children(".ivu-dropdown-menu").css("display", "none");
                                        }
                                    }
                                }
                            },
                            [
                                h('a',
                                    {
                                        style: {
                                            color: '#333'
                                        },
                                        domProps: {
                                            id: "title" + data.code
                                        }
                                    }, data.title),
                                h('DropdownMenu',
                                    {
                                        slot: 'list',
                                        style: {
                                            display: "block"
                                        },
                                        domProps: {
                                            id: "dropdown" + data.code
                                        }
                                    },
                                    [
                                        h('DropdownItem', {
                                            style: {
                                                fontSize: '14px !important',
                                                color: '#333',
                                                textAlign: 'center',
                                                display: data.children ? 'block' : 'none'
                                            },
                                            nativeOn: {
                                                click: ($event) => {
                                                    $event.stopPropagation();
                                                }
                                            }
                                        }, '添加同级目录'),
                                        h('DropdownItem', {
                                            style: {
                                                fontSize: '14px !important',
                                                color: '#1081CE',
                                                textAlign: 'center'
                                            },
                                            nativeOn: {
                                                click: ($event) => {
                                                    $event.stopPropagation();
                                                }
                                            }
                                        }, '添加子节点'),
                                        h('DropdownItem', {
                                            style: {
                                                fontSize: '14px !important',
                                                color: '#19BE6B',
                                                textAlign: 'center'
                                            },
                                            nativeOn: {
                                                click: ($event) => {
                                                    $event.stopPropagation();
                                                }
                                            }
                                        }, '修改'),
                                        h('DropdownItem', {
                                            style: {
                                                fontSize: '14px !important',
                                                color: '#FF0000',
                                                textAlign: 'center'
                                            },
                                            nativeOn: {
                                                click: ($event) => {
                                                    $event.stopPropagation();
                                                }
                                            }
                                        }, '删除')
                                    ]
                                )
                            ])
                        //结束
                    ])
                ]);
            }
        }
    }
</script>