问题重现
使用 this.$refs.tree.getCheckedKeys()
获取所有被选中的菜单id,如果子节点没有全部勾选,父节点的key不会获取到。
如下图所示,最终获取到的key没有“系统管理”和“菜单管理”的key,对于我的项目来说,问题就比较大了,因为我们的管理系统后台菜单是根据tree生成的。
解决方法
之前我的方法是修改源码,感谢评论区的小伙伴指出的方法,官方文档在后来更新了,能够直接调用了。
this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
Vue3+ElementPlus写法
<template>
<div>
<!-- 注意绑定ref -->
<el-tree ref="treeRef" :data="treeData" node-key="value" show-checkbox @check-change="handleCheckChange" />
</div>
</template>
<script setup>
// 节点的JSON数据,这里就不做列举了
const treeRef = ref()
// 当节点发生改变时打印当前选中+半选中的值
const handleCheckChange = (data) => {
console.log(treeRef.value.getCheckedKeys().concat(treeRef.value.getHalfCheckedKeys()))
}
const defaultProps = {
children: 'children',
value: 'value',
label: 'label',
}
</script>