Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“

简介: 本文讨论了在使用Vue和Element UI实现树形数据和懒加载时遇到的“Maximum call stack size exceeded”错误,指出问题的原因通常是因为数据中的唯一标识符`id`不唯一,导致递归渲染造成调用栈溢出。

Vue+element_Table树形数据与懒加载

报错信息:
1.Error in render: “RangeError: Maximum call stack size exceeded”
2.vue.esm.js?efeb:1906 RangeError: Maximum call stack size exceeded

支持树类型的数据的显示。当 row 中包含 children 字段时,被视为树形数据。渲染树形数据时,必须要指定 row-key。支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。

使用树形结构+懒加载需要的属性:

row-key=“id” 需要指定,不指定就不会出现 右侧朝向小箭头 就没有懒加载的情况
tree-props配置树表格懒加载标识
load方法,用于点击小箭头加载数据
lazy开启懒加载以后,就可以把load来的数据追加到表格中去了

    <el-table
        :lazy="lazy"
        :load="load"
        :tree-props="treeProps"
        :row-key="rowKey"
        ref="multipleTable"
        border
        class="table"
        :data="tableData"
        tooltip-effect="light"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
load methods:
  // 懒加载表格子级
    lazyLoad(tree, treeNode, resolve) {
   
      const {
    id } = tree;
      api
        .listChildrenRecord({
   
          parentId: id,
        })
        .then((arr) => {
   
          let {
   
            data: {
    data, total },
          } = arr[1];
          resolve(data);
        });
    }

出现上述报错主要是接口返回的数据,唯一标识id,不唯一了,所以产生了上述报错:
在这里插入图片描述
显示调用栈溢出,id不能重复,因为指定的row-key=“id” 需要确保唯一性。

目录
相关文章
|
2天前
|
JavaScript API
vue使用hook:声明周期来监听子组件的声明周期
本文介绍了如何在Vue中使用生命周期钩子来监听子组件的生命周期事件,包括在子组件内部监听和在父组件中监听子组件的生命周期钩子。
16 0
|
1天前
|
JavaScript
Vue使用element中table组件实现单选一行
如何在Vue中使用Element UI的table组件实现单选一行的功能。
12 5
Vue使用element中table组件实现单选一行
|
3天前
|
JavaScript
关于Vue非父子组件通信遇到的细节问题
本文讨论了Vue中非父子组件通信的一个细节问题,即当使用事件总线($eventsBus)进行通信时,需要确保两个组件能够同时在页面上显示,否则可能无法正确触发和监听事件。作者通过组件A和B的例子说明了这一点,并指出解决方案是在一个共同的父组件C中监听事件。
9 1
关于Vue非父子组件通信遇到的细节问题
|
3天前
|
JavaScript
Vue2.0、Vue3.0分别使用v-model封装组件[Vue必会]
本文介绍了在Vue 2和Vue 3中如何使用`v-model`来实现组件间的双向数据绑定,包括在Vue 2中使用`value`和`input`事件,以及在Vue 3中使用`modelValue`和`update:modelValue`事件的方法。
37 22
|
2天前
|
JavaScript
vue知识点
vue知识点
12 4
|
2天前
|
存储 JavaScript
vue页面跳转取消上一个页面请求
本文介绍了在Vue中如何取消上一个页面的请求,以避免页面跳转时请求未完成导致的数据错误。核心方法是使用axios的请求拦截器设置请求的取消令牌(cancelToken),并在vuex中存储这些取消令牌的引用。当进行路由跳转时,通过路由守卫清除这些请求,达到取消上一个页面请求的目的。
12 2
|
3天前
|
JavaScript
Vue在子组件中判断父组件是否传来事件
本文介绍了在Vue中如何通过`vm.$listeners`对象来判断父组件是否传递了特定的事件给子组件,并展示了如何检查事件是否存在以及相应的处理方法。
20 0
Vue在子组件中判断父组件是否传来事件
|
1天前
|
JavaScript
vue第一个项目之音乐播放器
vue第一个项目之音乐播放器
|
8天前
|
JavaScript
vue 函数化组件
vue 函数化组件
|
5天前
|
JavaScript
vue异步渲染
vue异步渲染