从后台获取数据到vue前端树形展示报错vue.jsTypeError: Cannot read property ‘key‘ of undefined

从后台获取数据到vue前端 树形表格展示 报错vue.jsTypeError: Cannot read property 'key' of undefined、页面卡死的解决办法

从后端得到的集合数据要想在树形表格中展示，则这个集合的实体都会有个集合属性，用来存放子级数据。数据传到前端后需要将层级数据转换成单层级别的数据用来在表格中显示。

//将层级数据转换为单层级别的迭代方法
generateList(tableTreeList){ //tableTreeList为层级数据
    let _that=this;
    for(let i=0;i<tableTreeList.length;i++){
        const node=tableTreeList[i];
        key=node.key;
        _that.expandedRowKeys.push(key);//使树状数据能够展开、合并
        if(node.children){
            _that.generateList(node.children);
        }
    }
}

上方代码里，key=node.key;其中可以看出node是集合的实体，node.key的key就是实体里的属性，但是我在后端里的实体是没有这个属性的，我就把key=node.key;改成key=node.id;这时候数据是可以在表格中可以树形展示并可操作，但是随着数据的增多，我发现有时候点击下一页或者上一页查看数据时，页面就会卡死，会报vue.jsTypeError: Cannot read property 'key' of undefined的错误，我想过我的实体都没有这个key属性，为什么会报这个错呢？

正是因为没有key属性才会报这个错！我在后端实体类中添加了一个key属性，并将id的值也赋给它，使它拥有唯一性。前端key=node.key不变。

这就解决了层级数据在ant Design vue框架的表格里进行树状展示

（刚实习后端开发小白被要求写前端页面踩的一个坑）