vue点击elementUI中Tree 树形控件的叶节点获取id触发事件

Question

vue中想要点击elementUI中Tree 树形控件的叶节点，然后获取叶节点的唯一id ，根据id触发事件，事件为div1的隐藏和div2的显示，请问该如何实现呢？
页面示意如下：

elementUI的Tree 树形控件代码如下：
<el-tree id="tree_left" :data="data1" ref="tree1" @node-click="handleNodeClick" default-expand-all node-key="id"
@click="nodeclick()">

Answer 1

<template>
    <div class="main">
        <div class="tree-css">
            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
            
            </el-tree>
        </div>
        <div class="right-page">
            <template v-if="chooseId == 1">
                <div class="p1p1 border">
                    <p class="pTitle">会议在线报名</p >
                    <p>会议1</p >
                    <p>会议2</p >
                </div>
            </template>
            <!-- 会议在线预约 -->
            <template v-if="chooseId == 2">
                <div class="p2p2 border">
                <p class="pTitle">公司交流预约</p >
                <p>xxxx公司有意于2023.02.01日下午14：00前来参加技术交流会</p >
                <p>xxxx公司有意于2023.02.02日下午15：00前来参加技术交流会</p >
                </div>
            </template>
            <!-- 我的议程安排 -->
            <template v-if="chooseId == 3">
                <div class="p3p3 border">
                <p class="pTitle">我的议程安排</p >
                <p>9：00 部门小会</p >
                <p>10：00 项目探讨</p >
                </div>
            </template>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            chooseId: 0,
            data: [{
                id: 11,
                label: '一级 1',
                children: [{
                    id: 1,
                    label: '二级 1-1',
                    children: []
                },{
                    id: 2,
                    label: '二级 1-2'
                }, 
                {
                    id: 3,
                    label: '二级 1-3'
                }]
                }, 
                {
                id: 21,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
                }, {
                id: 31,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        }
    },
    methods: {
        handleNodeClick(val1, val2, val3) {
            console.log(val1);
            this.chooseId = val1.id;
        }
    }
}
</script>
<style>
.main {
    display: flex;
}
.tree-css {
    height: 90vh;
    width: 300px;
    border: 1px solid #ccc;
}
.right-page {
    height: 90vh;
    width: 600px;
    border: 1px solid #ccc;
}
.border {
    border: 1px solid #ccc;
}
</style>