<el-tree
:data="menus"
show-checkbox
default-expand-all
node-key="id"
:default-checked-keys="menuIds" //选中项id组成的数组,如[1,2,3,4,5]
ref="rootTree"
:expand-on-click-node="false"
:props="defaultProps">
</el-tree>
export default {
data(){
return{
menuIds:[],
menus:[],
defaultProps:{
children: 'children',
label: 'name'
},
}
},
methods:{
updateRole(row){
this.updateId=row.id;
var params={
userId:row.id
}
getUserMenuByUserId(params).then(res=>{
if(res.status==200){
this.menus=res.data;//接口返回的列表
//========================回显==========================
this.menuIds = [];//存放选中项id的数组
this.getCheckedMenuIds(this.menus); //递归将接口返回列表中checked为true的项push进menuIds
this.$nextTick(()=>{
this.$refs.rootTree.setCheckedKeys([])
this.menuIds.forEach((i, n) => {
const node = this.$refs.rootTree.getNode(i);
if (node.isLeaf) {
this.$refs.rootTree.setChecked(node, true)
}
})
//this.$refs.rootTree.setCheckedKeys(this.menuIds);
})
}
})
},
getCheckedMenuIds(menus){
if(menus==null){
return;
}
for(var i=0;i<menus.length;i++){
var menu = menus[i];
if(menu.checked){
var id = menu.id;
this.menuIds.push(id);
this.getCheckedMenuIds(menu.children);
}
}
},
//==============提交时获取选中项的id========================
getKeys () {
var aKey = this.getCheckedKeys(this.menus, this.$refs.rootTree.getCheckedKeys(), 'id');
return aKey;
},
getCheckedKeys (data, keys, key) {
var res = [];
recursion(data, false);
return res;
// arr -> 树形总数据
// keys -> getCheckedKeys获取到的选中key值
// isChild -> 用来判断是否是子节点
function recursion (arr, isChild) {
var aCheck = [];
for ( var i = 0; i < arr.length; i++ ) {
var obj = arr[i];
aCheck[i] = false;
if ( obj.children ) {
aCheck[i] = recursion(obj.children, 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;
}
}
},
}
}
</script>