關於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);
            }
        }
    });
}