element-ui 中 el-tree 在 v-for 中使用,获取不到 getCheckedNodes() 和 getCheckedKeys(),报错:Error in v-on handler: “TypeError: this.$refs.tree.getCheckedNodes is not a function”
<el-tree :data="layerControl"
show-checkbox node-key="id"
:props="defaultProps"
@check="handleCheckChange"
ref="tree" highlight-current>
</el-tree>
data() {
return {
layerControl: [
{
id: 1,
label: '行政区划',
children: [
{
id: 3,
label: '社区'
},
{
id: 4,
label: '网格'
}
]
},
{
id: 2,
label: '网格员'
}
],
defaultProps: {
children: 'children',
label: 'label'
}
}
}
methods: {
handleCheckChange(data, checked, indeterminate) {
console.log(this.$refs.tree)
console.log(this.$refs.tree.getCheckedNodes())
console.log(this.$refs.tree.getCheckedKeys())
}
}
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: “TypeError: this.$refs.tree.getCheckedNodes is not a function”
解决:
<el-tree :data="layerControl"
show-checkbox node-key="id"
:props="defaultProps"
@check="(click, checked)=>{handleCheckChange(click, checked)}"
ref="tree" highlight-current>
</el-tree>
methods: {
handleCheckChange(click, checked) {
console.log(checked.checkedKeys)
console.log(checked.checkedNodes)
}
}