el-cascader联级选择器在v-for循环中获取节点对象的正确使用姿势

最新推荐文章于 2026-04-24 10:43:55 发布

原创最新推荐文章于 2026-04-24 10:43:55 发布 · 2.2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Vue

当前文章被收录于：

Vue

6 篇文章 1 人学习

订阅专栏查看详情

elementUI

当前文章被收录于：

elementUI

3 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

当在Vue的v-for循环中使用el-cascader时，遇到getCheckedNodes方法不可用的错误。通过深入研究，找到了正确的解决方案。

在这里插入图片描述

el-cascader在v-for中使用refs.xxx.getCheckedNodes()会报getCheckedNodes is not a function ，研究了很久，终于搞出了正确姿势：

//v-for循环时要有item和index ，将index传入el-cascader的change事件：
<el-row v-for(item,i) in orgList :key="index">
<el-cascader ref="tree" 
@change = "checkedChange(item,index)"
:prop="{checkStrictly:true,emitPath:false}"
:show-all-levels="false"
v-model="saveForm.org"
></el-cascader>
</el-row>

//methods中：
checkedChange(item,index){
	let node = this.$refs.tree[index].getCheckedNodes()// 获取选中节点对象
	console.log(node)
	...
}