zoukankan      html  css  js  c++  java
  • 关于elementUI的table报错RangeErr Maximum call stack size exceeded

    项目中需要做一个功能,在表格中如果存在二级列表,点击箭头之后请求后台接口,展开显示二级列表的内容。点击箭头拿到了数据,但是后台会报错如下图,且数据展示不出来

    上网查了下,意思是堆栈溢出,这个提示让我十分头疼,网上关于出现这个问题的原因有很多种,但是我没有找到和我这个一样的。到了最后,才找出来原因出在table列表绑定的row-key上,因为row-key绑定的参数必须是唯一的,我绑定的是id。但是后台返回的列表中一级列表中的id和二级列表中的第二条数据的id是一样的,所以才报出了这样的错误。关于堆栈溢出的问题说完了,下面要写一下table懒加载这个功能:

    表格中需要绑定row-key,lazy,load和tree-props,代码如下:

    <el-table
          :data="tableList"
          stripe
          border
          :height="tableHeight.height"
          :row-class-name="tableRowClassName"
          tooltip-effect="light"
          :header-cell-style="{background:'#f2f2f2'}"
          row-key="id"
          lazy
          :load="queryByRuleFlowIdAndParentId"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          v-loading="showTableLoading"
        >
          <el-table-column prop="name" label="规则名称" width="200" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="ruleNum" label="规则编码" width="200" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="systemName" label="所属规则集" width></el-table-column>
          <el-table-column prop="processTypeName" label="层级"></el-table-column>
          <el-table-column label="状态" width="80">
            <template slot-scope="scope">
              <span v-text="scope.row.statusCd == 1?'在用':'失效'"></span>
            </template>
          </el-table-column>
          <el-table-column prop="descp" label="描述" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop label="操作" width="310">
            <template slot-scope="scope">
              <el-button type="text" size="mini">修改条件/参数</el-button>
              <el-button type="text" size="mini" @click="newsameNode">新建同级规则</el-button>
              <el-button type="text" size="mini">新建子规则</el-button>
              <el-button type="text" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

    下面是对应的方法

    queryByRuleFlowIdAndParentId(tree, treeNode, resolve) {
        let self = this;
        let data = {
            ruleFlowId: 100002042,
            // this.searchData.ruleFlowId
            parentId: 100002066,
            //tree.id
            currentPage: self.currentPage,
        };
        let arr = [];
        $ajaxRuleView.queryByRuleFlowIdAndParentId(data, (res) = > {
            if (res.code == '0000') {
                console.log(res.data);
                if (res.data && res.data.length > 0) {
                    res.data.map((item, index) = > {
                        arr.push({
                            id: item.id,
                            name: item.name,
                            ruleNum: item.ruleNum,
                            systemName: item.systemName,
                            processTypeName: item.processTypeName,
                            statusCd: item.statusCd,
                            descp: item.descp,
                        });
                    });
                    resolve(arr);
                }
            }
        });
    }
  • 相关阅读:
    (6)STM32使用HAL库实现modbus的简单通讯
    (4)STM32使用HAL库实现串口通讯——理论讲解
    (3)STM32使用HAL库操作外部中断——实战操作
    (2)STM32使用HAL库操作外部中断——理论讲解
    对图片进行压缩、水印、伸缩变换、透明处理、格式转换操作1
    文件压缩、解压工具类。文件压缩格式为zip
    Bean与Map的转换 和 Map与Bean的转换
    正则 身份证的验证
    金钱处理工具类 人民币转换为大写
    正则表达式工具类,验证数据是否符合规范
  • 原文地址:https://www.cnblogs.com/florazeng/p/13460457.html
Copyright © 2011-2022 走看看