el-tree控件的使用，提交与回显，解决半选中状态

 <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>