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());

  //子級為全選時 為了獲取父級id做法   (備用做法)

      this.$refs.tree.getHalfCheckedNodes().forEach((item) => {

        select_box.push(item.module_id)

      })

      //獲取選中的子級id

      this.$refs.tree.getCheckedNodes().forEach((item) => {

        select_box.push(item.module_id)

      })

            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');
                });
        }

 

懶加載

//動態渲染子級部門
    loadNode(node, resolve) {
      let id = node.data.id
      let postData = {
        page: 1,
        page_size: 999,
        type: 0, //部門列表傳0 子賬號關聯傳1
        pid: id, //部門id 根部門傳0
      }
      this.$axios
        .post('/brandapi/Staff/getSectionList', postData)
        .then(({ data }) => {
          console.log(data, '獲取子級部門')
          if (node.level == 0) {
          return resolve([this.rootNode]);
        } else {
          var children = data.data.data
          resolve(children);
        }
        })
    },