【Element-UI】解决el-tree在v-for中获取不到getCheckedNodes_element tree setcheckedkeys之后getcheckednodes拿不到数据-程序员宅基地

技术标签: Element-UI  前端  

以前的写法:

<el-tree
	ref="menuPermissionTree"
	:data="menuPermission"
	node-key="id"
	:default-checked-keys="selectedItemPermissionsElement"
	show-checkbox
	default-expand-all>
</el-tree>
data(){
    
	return {
    
		menuPermission: [],  // 菜单权限树 数组
		selectedItemPermissionsElement:[], // 默认勾选的节点的 key 的数组		
	}
},

methods:{
    
	let fullChoosed = this.$refs.menuPermissionTree.getCheckedNodes(); // 获取全选节点信息
	console.log(fullChoosed);
}

上面的这种写法,在获取单个树的节点信息的时候可以正常使用,但是遍历多个树(动态获取多个树上勾选的节点信息)的时候会报错:
Error in v-on handler: "TypeError: this.$refs.tree.getCheckedNodes is not a function"

解决方法:

<el-tree
	ref="menuPermissionTree"
	:data="menuPermission"
	node-key="id"
	:default-checked-keys="selectedItemPermissionsElement"
	@check="(click, checked)=>{handleCheckChange(click, checked)}"
	show-checkbox
	default-expand-all>
</el-tree>
data(){
    
	return {
    
		menuPermission: [],  // 菜单权限树 数组
		selectedItemPermissionsElement:[], // 默认勾选的节点的 key 的数组		
	}
},

methods:{
    
	handleCheckChange(click, checked){
    
		console.log(checked.checkedKeys);
		console.log("全选",checked.checkedNodes);
		console.log(checked.halfCheckedKeys);
		console.log("半选",checked.halfCheckedNodes);
	}
}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/houwanle/article/details/107173090

智能推荐

最全Android UVC Camera 闪退问题修复_uvc频繁断开-程序员宅基地

文章浏览阅读3.4k次。这应该是最简洁的Android UVC Camera库了一、快速点击拍照按钮闪退修改UVCButtonCallback.cpp文件里的uvc_button_callback方法修改前:void UVCButtonCallback::uvc_button_callback(int button, int state, void *user_ptr) { UVCButtonCallback *buttonCallback = reinterpret_cast<UVCButtonCallbac_uvc频繁断开

C++基础(Visual studio)_visual studio c++教程-程序员宅基地

文章浏览阅读7.8k次,点赞11次,收藏56次。C++基础语法_visual studio c++教程

【vue使用sessionStorage记录 key value形式数据】_sessionstorage获取所有的key和value-程序员宅基地

文章浏览阅读124次。开发中方便非同一页面取数据或父子页面数据不好传输的问题_sessionstorage获取所有的key和value

cocos creator 学习: 设置scrollView 中content的偏移位置_scollview contente item设置位置-程序员宅基地

文章浏览阅读9.7k次。最近有这样的需求,折腾了许久,在此把一些问题和解决方法写出来,欢迎大家指正,如有更好的建议记得留言哦~使用背景: 每次结算时把当前所玩的关卡节点显示在scrollView 的最中间思路: 移动content的位置 scrollView 滑动的原理: 所有显示的内容节点 都是 content 的子节点,view 控制显示区域的大小,通过content的位置变..._scollview contente item设置位置

在Vue中使用Echarts绘制带图标的矩形树图_wjx.cn/vj/pxgrofe.aspx-程序员宅基地

文章浏览阅读7.7w次。最终效果图:DEMO代码:在页面开头引入echarts.js,资源请自行在官网下载import echarts from 'echarts';demoData在文章最下面<template> <div> <div class="cxt" id="treemap_cxt"></div> <..._wjx.cn/vj/pxgrofe.aspx

海康威视智能机器人泊车_未来社区联动系列:千城建筑与海康威视关于AGV自动泊车系统的研讨...-程序员宅基地

文章浏览阅读1k次。千城建筑依托未来社区研发中心,积极与未来社区产业联盟单位开展技术交流,共同研究前沿技术在未来社区应用中的优势、存在的问题及优化方向。千城建筑将整理并发布图文展示研讨成果。引言:近日,千城建筑未来社区研发中心举行自动引导运输机器人(AGV)技术应用专题研讨会。海康威视机器人泊车行业经理邓程文、杭州分公司工商企行业行销总监孟冰雪、杭州分公司市场经理应紫薇出席研讨会,未来社区研发中心全员参与。..._海康agv优势

随便推点

vue3.0 router路由跳转传参(router.push)_vue3 router.push 传参数-程序员宅基地

文章浏览阅读7.8w次,点赞80次,收藏359次。vue3.0取消了2.0部分api,所以路由跳转传值方式有所不同。这里主要讲编程式导航,也就是router.push(location, onComplete?, onAbort?)vue3.0新增API:useRouter和useRoute一.路由跳转1.首先在需要跳转的页面引入API---useRouterimport { useRouter } from 'vue-router'2.在跳转页面定义router变量 const router = useRouter()_vue3 router.push 传参数

*.bpmn20.xml的几种编辑方式_flowable bpmn20.xml编辑工具-程序员宅基地

文章浏览阅读5.5k次。第一种:可以使用eclipse(sts) flowable 插件第二种:可以使用https://demo.bpmn.io/可以将*.bpmn20.xml拖入到窗口中,修改完毕后下载即可第三种:可以使用官网下载5个war包 本地tomcat启动(可以参考我的《Flowable 简单例子》 )第四种:idea安装actiBPM存在的问题:存在的问题 *.bpmn20.x..._flowable bpmn20.xml编辑工具

关于Rouge和pyrouge的安装和使用_pyrouge计算rouge-p得分-程序员宅基地

文章浏览阅读1w次。原文链接 1、pyrouge介绍:https://github.com/abisee/pointer-generator 2、pyrouge介绍:https://pypi.python.org/pypi/pyrouge 3、使用pyrouge前,需要安装好rouge. 4、这个链接里有相应的安装工教程和工具:https://blog.csdn.net/qq_32458499..._pyrouge计算rouge-p得分

javaagent入门指南_-javaagent: windows-程序员宅基地

文章浏览阅读1.5k次。第一次见到javaagent时,是偶然了解到Spring的AOP中使用了一个Instrumentation技术,对自己来说是一个新的知识点,所以很好奇,因此查阅相关文档和资料进行学习,在此记录,如有不妥之处,请指正。运行环境:操作系统:Windows10jdk版本:openjdk version 11.0.7概述javaagent顾名思义就是一个java代理,我们知道任何一项java应用的启动都需要有一个入口函数,加载从入口函数开始一直扩散到整个应用。类在jvm中的加载顺序是:加载——&g_-javaagent: windows

ubuntu16.04使用sudo apt-get autoremove导致系统崩溃的解决办法_sudo apt-get update会更新崩系统吗-程序员宅基地

文章浏览阅读6.6k次。问题描述:本人安装的是双系统win10+ubuntu,在ubuntu中运行使用的时候想要清除一下软件的依赖包然后运行了一个命令sudo apt-get autoremove,运行完成的时候当时没有什么影响,但是重启之后就出了问题,在gnu grub version 2.02~beta2-36ubuntu3.16为标题的界面中只找到win10的启动引导,没有出现ubuntu的启动引导。因此猜测可能s..._sudo apt-get update会更新崩系统吗

中国人民银行分支机构2009年人员录用计算机专业试题-程序员宅基地

文章浏览阅读953次。中国人民银行分支机构2009年人员录用计算机专业试题 另外附上一个牛人写的08年人员录用计算机专业试题地址:http://bbs.qzzn.com/read-htm-tid-10128599.html试卷整体说来,不是很难,但涉及的知识点还是比较多.要求的是知识面广.由于计算机部分的历年考题不是很好找,大多也是一些记忆,本文也一样是一些不完整的记忆.写出来希望对下一年的考生有所帮助.试卷分为四

推荐文章

热门文章

相关标签