Element ui的tree树形控件获取所有选中的节点(亲测可用)

最新推荐文章于 2025-05-30 09:06:24 发布

小志的博客

最新推荐文章于 2025-05-30 09:06:24 发布

阅读量1.1w

点赞数 10

CC 4.0 BY-SA版权

分类专栏： element ui

本文链接：https://blog.csdn.net/li1325169021/article/details/113896196

element ui 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在使用Element UI的el-tree组件时，实现节点选中状态变化的监听，并通过JavaScript获取选中节点的deptId。展示了数据绑定、方法定义以及事件处理的基本用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、tree结构代码

<el-tree :data="data" :props="defaultProps"  :show-checkbox="true" :check-strictly="false" node-key="deptId" ref="tree"
@check-change="handleCheckChange">
</el-tree>

2、js代码

  data() {
       return {
         defaultProps: {
               children: 'ChildNodes',
               label: 'deptName',
               deptId:'deptId'
           },
           closeTree: false,
       }
    },
    methods: {
       //节点选中状态发生变化时的回调
        handleCheckChange(data, checked, indeterminate) {
        		//获取所有选中的节点 start
                let res = this.$refs.tree.getCheckedNodes()
                let arrDeptId = []
                res.forEach((item) => {
                    arrDeptId .push(item.deptId)
                })
                console.log(arrDeptId)
                //获取所有选中的节点 end
            }
        },
    }