element-ui el-tree组件获取当前选择所有选中(check)和半选中(indeterminate)的节点

46 篇文章 1 订阅
16 篇文章 1 订阅

网上查了一大堆都说要改源码,最后发现有方法不用改源码

解决方案


<el-tree ref="subRoleTree"
         :data="subRoleMenuList"
         show-checkbox
         node-key="id"
         :props="defaultProps"
         @check="subRoleTreeCheck">
</el-tree>
//获取所有选中的节点id
subRoleTreeCheck(keys, leafOnly) {
    console.log(keys, leafOnly)
    //获取所有选中的节点id
    this.tenantIdMenus = this.$refs.subRoleTree.getCheckedKeys().concat(this.$refs.subRoleTree.getHalfCheckedKeys()) 
    console.log(this.tenantIdMenus, '选中的节点')
},

将getCheckedKeys()和getHalfCheckedKeys()两个方法获取的数据合并就是我们想要的数据了

到此结束。 

获取el-tree组件当前选中节点,可以使用this.$refs.tree.getCheckedNodes()方法。在@check-change事件中调用该方法即可。例如,在handleCheckChange方法中,可以使用以下代码获取当前选中节点: ```javascript handleCheckChange(data, checked, indeterminate) { let checkedNodes = this.$refs.tree.getCheckedNodes(); // 对获取到的选中节点进行处理 // ... } ``` 请注意,这里的this.$refs.treeel-tree组件的引用,需要在el-tree组件上设置ref属性,例如ref="tree"。同时,还需要确保el-tree组件的data属性正确设置了数据源。 引用\[2\]提供了一个示例代码,其中展示了如何在el-tree组件上设置ref属性,并在@check-change事件中调用getCheckedNodes()方法来获取选中节点。 引用\[3\]提供了一个HTML代码示例,展示了如何使用el-tree组件,并在el-tree组件上设置ref属性。 综上所述,要获取el-tree组件当前选中节点,可以使用this.$refs.tree.getCheckedNodes()方法,并确保正确设置了el-tree组件的ref属性。 #### 引用[.reference_title] - *1* *2* [Element Tree 复选框获取选中节点](https://blog.csdn.net/weixin_44640323/article/details/119415607)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [el-tree定位当前选中节点](https://blog.csdn.net/junyang2016/article/details/125423236)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值