2019-02-25 element-ui tree问题，设置默认选中的节点。点击的时候把获取的节点给后台。（默认选中ztree节点，并且子节点可以选中一个或者2个）

1.先把要选中的节点id取出来放数组里面

<template>
    <div>
        <el-tree
            :props="defaultProps"
            :data="menuData"
            show-checkbox
            node-key="id"
            accordion
            @check="handleCheckChange"
            ref="tree"
            :default-checked-keys='resourceCheckedKey'
        >
        </el-tree>
    </div>
</template>

3.在data里面设置一个resourceCheckedKey:[]

data(){
            return{
                menuData:[],
                resourceCheckedKey: [],
                defaultProps:{
                    label: 'name',
                    children: 'children'
                }
            }
        },

4.that.$refs.tree.setChecked(value,true,false)---（子节点只选中一个也可以）必须放到setTimeout里面
//this.resourceCheckedKey要设置一个setTimeout里面，因为上面.then是异步的，所以数没有加载出来，就加载了this.resourceCheckedKey，所以要用setTimeout设置一下

setTimeout(function () {
                        that.resourceCheckedKey.forEach((value)=>{
                        //setChecked 子节点只选中一个需要用setChecked，（(key/data, checked, deep) 接收三个参数，
1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 3. boolean 类型，是否设置子节点 ，默认为 false）如果全部选中setCheckedKeys
                            that.$refs.tree.setChecked(value,true,false)
                        });
                    },500);
                    return this.menuData
                })
            },

loadNode(roleId) {
                var that = this;
                api.getRoleMenuJson(roleId).then(res=>{
                    res.data.forEach((value)=>{
                        if(!value.pId){
                            if(value.checked && this.resourceCheckedKey.indexOf(value.id)==-1){
                                this.resourceCheckedKey.push(value.id);
                            }
                            this.menuData.push(value)
                            this.groupMenu(value,res.data);
                        }
                    });

groupMenu(value,data){
                value.children=[];
                data.forEach((item)=>{
                    if(item.checked && this.resourceCheckedKey.indexOf(item.id)==-1){
                        this.resourceCheckedKey.push(item.id);
                    }
                    if(value.id==item.pId){
                        value.children.push(item);
                        this.groupMenu(item,data)
                    }
                });
            }

子组件选中的id

handleCheckChange(data,checked) {
               //checked.checkedKeys  选中的节点id数组
               //checked.halfCheckedKeys 半选中节点id数组
               let ids=[];
               ids=checked.halfCheckedKeys.concat(checked.checkedKeys);//选中节点和半选中节点所有的id
               this.$emit('menu-select',ids)
           },

2.父组件接受

getMenuTree(ids){
                console.log(ids);
                //根据后台的接口形式保存
                //ids 选中和半选中ids
                this.editForm.ckStatus='';
                this.editForm.ckIds=ids.join(',');
                ids.forEach(value=>{
                    this.editForm.ckStatus+="1,"
                });
                this.editForm.ckStatus.slice(0,this.editForm.ckStatus.length-1)
            },

终中结果.png