啥都想学·啥也不会 2023-02-09 16:57 采纳率: 56.3%
浏览 53
已结题

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

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

img

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

  • 写回答

4条回答 默认 最新

  • 关注
    
    <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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 2月18日
  • 已采纳回答 2月10日
  • 修改了问题 2月9日
  • 创建了问题 2月9日

悬赏问题

  • ¥15 用C语言完成一个复杂的游戏
  • ¥15 如何批量更改很多个文件夹里的文件名中包含文件夹名?
  • ¥50 MTK手机模拟HID鼠标出现卡顿
  • ¥20 求下下面这个数据结构代码
  • ¥20 前端 二进制文件流图片转化异常
  • ¥15 github上的这个C语言项目如何跑起来
  • ¥15 java 判断某个数 区间是否存在
  • ¥15 appium控制多个雷电模拟器问题
  • ¥15 C# iMobileDevice
  • ¥15 谁会做这个啊#ensp#Boson NetSim