el-tree的使用，以及全选反选获取id =>详

　　　　　　　　　　　　<el-tree

                        :data="data"

                        show-checkbox

                        node-key="module_id"

                        ref="tree"

                        highlight-current

                        :props="defaultProps"

                        @check="nodeClick"

                        :check-strictly="ISstrictly"

                    >

                        <span class="custom-tree-node" slot-scope="{ node, data }">

                            <span>{{ data.module_name }}</span>

                            <!-- <span>

                                <el-button type="text" size="mini" style="margin-left: 5px">({{ data.module }})</el-button>

                            </span> -->

                        </span>

                    </el-tree>

data() {
        return {
            ISstrictly: true, //编辑的时候 获取数据时候父子级不关联 获取完毕勾选的时候父子级再关联 防止获取数据的时候 子级部分是部分选中 却 显示 全部选中
            checkAll: false, //全选 反选
            select_box: [],
            data: [], //tree
            defaultProps: {
                children: 'child',
                label: 'module_name'
            },
            treeLength: '' //所有的子级加起来的长度 用来判断全选 和 已选的长度 是否一致
        };
    },

// 全选

handleCheckAllChange(val) { 
            if (this.checkAll) {
　　　　　　　　　　// 判断true 或者 false
                this.$nextTick(function () {
                    this.$refs.tree.setCheckedNodes(this.data);
                });
            } else {
                this.$nextTick(function () {
                    this.$refs.tree.setCheckedKeys([]);
                });
            }
            this.$nextTick(function () {
　　　　　　　　　　// 把勾选的id存起来
                console.log(this.$refs.tree.getCheckedNodes(), 'console.log(this.$refs.tree.getCheckedNodes());');
                let select_box = [];
                this.$refs.tree.getCheckedNodes().forEach((item) => {
                    select_box.push(item.module_id);
                });
                this.select_box = select_box;
                // console.log(this.select_box, 'select_box888');
            });
        },

　　//当用户点击的时候      

  nodeClick(data, node, e) {
　　　　　　　// 把一进来的状态 父子级是否关联给取消
            this.ISstrictly = false;
            let select_box = [];
　　　　　　　　// 获取到所有已选择的id 存到数组里面
            select_box = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
            console.log(select_box, 'select_box');
            this.select_box = select_box;
　　　　　　　　// 判断是否全选了
            if (this.select_box.length != this.treeLength) {
                this.checkAll = false;
            } else {
                this.checkAll = true;
            }
        },

        //获取当前用户的权限列表
        getUserAuthList() {
            this.$axios
                .post('/platformapi/Auth/getUserAuthList')
                .then(({ data }) => {
                    console.log(data, '获取当前用户的权限列表');
                    if (data.code == 1) {
                        this.data = data.data;
                        this.$nextTick(function () {
　　　　　　　　　　　　　　　// this.treeLength = this.$refs.tree.getCheckedNodes().length;
　　　　　　　　　　　　　　　　　//这个函数是计算出所有子节点的个数
                            this.treeLength = this.getTreeNodeIDList(this.data);
                            console.log(this.treeLength, '888777');
                        });
                        this.$nextTick(function () {this.getSystemUserGroupDetail();
                        });
                    }
                })
                .catch((res) => {
                    console.log(res, 'catch');
                });
        },
        //获取树列表的所有节点  ==>  这里是计算出所有子节点的个数
        getTreeNodeIDList(data) {
            var str = 0;
            const getStr = function (list) {
                list.forEach(function (row) {
                    if (row.child) {
                        getStr(row.child);
                        str += 1;
                    } else {
                        str += 1;
                    }
                });
            };
            getStr(data);
            this.treeLength = str;
            return this.treeLength;
            console.log(this.treeLength, 'this.treeLength');
        },
        //获取当前用户组详情
        getSystemUserGroupDetail() {
            this.$axios
                .post('/platformapi/Auth/getSystemUserGroupDetail', {
                    group_id: this.group_id
                })
                .then(({ data }) => {
                    console.log(data, '获取当前用户组详情');
                    if (data.code == 1) {
                        this.group_name = data.data.group_name;
                        this.desc = data.data.desc;
                        this.select_box = data.data.module_id_array.split(',');
                        this.select_box.forEach((item) => {
                            // console.log(item);
                            item = parseInt(item);
                        });
　　　　　　　　　　　　　　//这里是让返回的id项 默认选中
                        this.$refs.tree.setCheckedKeys(this.select_box);
                        this.select_box = this.select_box.map((item) => {
                            return +item;
                        });
                        console.log(this.select_box, '11');
　　　　　　　　　　　　　　// 是否全选
                        if (this.select_box.length == this.treeLength) {
                            this.checkAll = true;
                        } else {
                            this.checkAll = false;
                            this.$nextTick(function () {
　　　　　　　　　　　　　　　　　　　//这里是获取详情数据完毕过后 则父子级是否关联
                                this.ISstrictly = false;
                            });
                        }
                    }
                })
                .catch((res) => {
                    console.log(res, 'catch');
                });
        },
　　　　　　// 保存
        save() {
            this.nodeClick();
            this.$axios
                .post('/platformapi/Auth/addUserGroup', {
                    group_id: this.group_id,
                    select_box: this.select_box.join(','),
                    group_name: this.group_name,
                    desc: this.desc
                })
                .then(({ data }) => {
                    console.log(data, '保存');
                    if (data.code == 1) {
                        this.$message.success(data.message);
                        this.$router.go(-1);
                    } else {
                        this.$message.warning(data.message);
                    }
                })
                .catch((res) => {
                    console.log(res, 'catch');
                });
        }