1.报错情景:
使用的elementUI表格里面的 树形数据与懒加载
2. 功能是 在表格中如果存在二级列表,点击箭头之后请求后台接口,展开显示二级列表的内容。点击箭头拿到了数据,但是后台会报错如下图,且数据展示不出来
3.解决办法:
上网查了下,意思是堆栈溢出,原因出在table列表绑定的row-key上,因为row-key绑定的参数必须是唯一的,我绑定的是id。但是后台返回的列表中一级列表中的id和二级列表中的第二条数据的id是一样的,所以才报出了这样的错误。
表格中需要绑定row-key,lazy,load和tree-props,代码如下:
<el-table
style="width: 100%"
highlight-current-row
:border="false"
:data="tableData"
v-adaptive="{ bottomOffset: 100 }"
:height="800"
:show-summary="false"
:key="randomKey"
ref="table"
:header-cell-style="{ background: '#F3F7FE' }"
@selection-change="handleSelectionChange"
row-key="id"
lazy
:row-class-name="tableRowClassName"
:span-method="objectSpanMethod"
:load="load"
:tree-props="{ Children: 'Children', hasChildren: 'hasChildren' }"
>
>
...............
</el-table>
// 展开获取数据
load(tree, treeNode, resolve) {
let that = this;
that.$api.getlist(tree.employeeId).then((res) => {
// console.log("调岗详细信息", res);
if (res.data.status === 200) {
if (res.data.data && res.data.data.length > 0) {
let b = res.data.data.map((item, index) => {
//id的处理
item.id = item.id + "children";
});
res.data.data.forEach((item, index) => {
if (!item.startDate) return;
that.newarr.push(item);
});
resolve(JSON.parse(JSON.stringify(that.newarr)));
} else {
resolve([]);
}
}
});
},