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

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


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)
            },
2019-02-25 element-ui tree问题,设置默认选中的节点。点击的时候把获取的节点给后台。(默认选中ztree节点,并且子节点可以选中一个或者2个)_第1张图片
终中结果.png

你可能感兴趣的:(2019-02-25 element-ui tree问题,设置默认选中的节点。点击的时候把获取的节点给后台。(默认选中ztree节点,并且子节点可以选中一个或者2个))