ElementUI使用树形数据与懒加载形式展示数据Error: for nested data item, row-key is required. children: [{$ref: “…”}]

记一次使用vue+elementUI数据展示报错

使用elementUI展示table时，使用树形数据与懒加载形式展示数据。

这里需要注意一下的是，elementUI版本尽量高一点，否则可能不显示。我公司的elementUI版本就是太低了，最后我换了高版本才搞定的。使用过程就不说了，按照官网提示就可以了。

但是晚上让同事搞的时候，添加了一条数据，然后修改了数据，之后就不行了，前端就报错了，提示row-key是必须的。可是查看了前端是好的啊，所有配置都有，而且一直是可以运行的。查看了一下返回数据，也正常啊，标准的json格式。仔细查看了一下，唯一不同的是，同事添加的那条数据，children是这样的，children: [{$ref: “…”}]。上网查了一下，发现这种符号，表示是递归调用了它自己。然后检查数据库，发现果然，他的父菜单id写的它自己。修改了就好了。然后代码健壮性需要修改一下，**如果是修改就需要屏蔽自己的那条数据就可以了。**前端就可以正常显示了，有时是前端报的错误，但是并不一定是前端的问题，仔细分析过了，就可以找到相应问题解决方案。

总结:
其实这个是写的菜单的查询，以及动态生成菜单的功能。查询的sql是用mybatis写的，可以支持多级菜单，也就是递归写法。但是递归唯一的一点是不能死循环。 所以出现了这种问题。