vue2 elementui tree组件配置选中项目时报Maximum call stack size

Lan.W

已于 2023-02-08 17:34:21 修改

阅读量165

点赞数

分类专栏： JS vue2 文章标签： elementui vue.js javascript

于 2023-02-08 17:33:44 首次发布

本文链接：https://blog.csdn.net/LlanyW/article/details/128939630

版权

vue2 同时被 2 个专栏收录

21 篇文章 1 订阅

订阅专栏

18 篇文章 5 订阅

订阅专栏

报错如下：

树结构显示角色的权限，勾选中的item是拥有的。但是在遍历数组获取选中item时报递归栈超出最大size.

错误源码：

getIds() {
      this.allPermission.map(myItem => {
        if (myItem.select) {
          //select状态添加
          this.checkKeys.push(myItem.id)
        }
        if (myItem.children && myItem.children.length) {
          this.getIds(myItem.children)
        }
      })
    },
//
    async getAssign() {
      let result = await this.$API.permission.toAssign(this.roleId);
      console.log(result);
      if (result.code = 20000) {
        this.allPermission = result.data.children || [];
        this.checkKeys = []
        this.getIds() //调用报错：超出最大递归层数
      }
    }
  },

解决：

多次调试检查代码，发现递归的数组一直是 this.allPermission ，导致递归出不去，死循环了。

修改如下：

getIds(arr) {
      // this.allPermission.map(myItem => {
      arr.map(myItem => {
        if (myItem.select) {
          //select状态添加
          this.checkKeys.push(myItem.id)
        }
        if (myItem.children && myItem.children.length) {
          this.getIds(myItem.children)
        }
      })
    },
//
    async getAssign() {
      let result = await this.$API.permission.toAssign(this.roleId);
      console.log(result);
      if (result.code = 20000) {
        this.allPermission = result.data.children || [];
        this.checkKeys = []
        this.getIds(this.allPermission) //调用报错：超出最大递归层数
      }
    }
  },

递归的函数传递数组进去。不用this.allPermission.