在elementUI中el-tree获取字节点id以及父节点id(包括非全选中的情况)
dom结构如下:
<el-form-item label="权限" prop="menuIds">
<div class="role_permit">
<el-tree
ref="tree"
:data="permitData"
show-checkbox
node-key="id"
@check="checkPermit"
default-expanded-all
:default-checked-keys="ruleForm.menuIds"
:props="defaultProps"
v-model="ruleForm.menuIds"
></el-tree>
</div>
</el-form-item>
permitData数据结构
![68b173599c02a93bf3960543c83027aa.png](https://i-blog.csdnimg.cn/blog_migrate/479b92e70f6c7ae953dc72a2e0e8a704.png)
[
{
"id":1,
"menuName":"首页",
"parentId":0,
"menuType":1,
"checked":false,
"menuCode":null,
"button":[
],
"childMenus":[
]
},
{
"id":2,
"menuName":"区域经理/业务员",
"parentId":0,
"menuType":1,
"checked":false,
"menuCode":null,
"button":[
],
"childMenus":[
{
"id":14,
"menuName":"区域经理/业务员",
"parentId":2,
"menuType":2,
"checked":false,
"menuCode":null,
"button":[
],
"childMenus":[
]
},
{
"id":15,
"menuName":"团队设置",
"parentId":2,
"menuType":2,
"checked":false,
"menuCode":null,
"button":[
],
"childMenus":[
]
}
]
}
...............此处省略一万字
]
js方法
getKeys(){
var menuIds =this.getCheckedKeys(this.permitData,this.$refs.tree.getCheckedKeys(),'id')
},
getCheckedKeys(data,keys,key){
var res = [];
recursion(data,false);
return res;
function recursion(arr,isChild){
var aCheck = [];
for(var i = 0; i< arr.length; i++){
var obj = arr[i];
aCheck[i] = false;
if(obj.childMenus){
aCheck[i] = recursion(obj.childMenus,true) ? true : aCheck[i];
if(aCheck[i]){
res.push(obj[key]);
}
}
for(var j =0;j<keys.length;j++){
if(obj[key] == keys[j]){
aCheck[i] =true;
if(res.indexOf(obj[key])==-1){
res.push(obj[key]);
}
break;
}
}
}
if(isChild){
return aCheck.indexOf(true) != -1;
}
}
},
通过调用 getKeys()方法可以获取到字节点id以及父节点id