Element中Table表格树形数据的展示问题

在做一个将100个员工数据按6组展示时，发现在后端处理好数据正常返回给前端，前端无法正常显示，打开F12检查网页时能发现数据是正常传递的：

首先先去查看官方文档上对于Table表格树形数据的定义（这里注意先检查自己使用的element版本和官方文档选择的版本是否一致，版本不同的情况下有些语法是不支持的）：支持树类型的数据。此时，必须要指定 row-key。

row-key属性实际的作用是标识表格每行数据是通过哪个属性来进行区别的，一般而言id比较常见。在这里我使用groupId。

首先要明确的是，数据是在后端就分好了层次而非在前端进行分层，前端传递数据时只需传递已经封装好的List集合，通过一个空的数组去接收。再通过指定这个row-key的值，来识别根据哪个属性是进行分层。
在这里我后端进行分层的方法是：先将我的员工类的对象存入到一个List集合中，再定义一个Result类为最终结果类：这个最终结果类中有两个属性，groupId属性和List属性。然后将这个Result也存入一个List集合中即List<Result>，Result中又有groupId和List<员工类>两个属性，这样就完成了分层。
我这里将row-key设置为groupId，根据小组的编号来进行分层。但是要注意，row-key设置的这个字段，我们使用的集合中的实体类中必须定义这个字段，例如此处我应该在我的员工类和最终结果类中定义属性private Integer groupId，否则会报rowKey is required的错误信息。

但是设置好分层的key并在实体类中创建好key的属性后，又出现了一个报错：

这个错误是因为key的属性冲突导致的，在官网的定义是：有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。因为在我的返回结果中，每个员工的信息都为一个子元素，他们共同的父元素为children这个list集合，在给员工类定义了groupId这个属性作为row-key后，我们要保证每个子元素的groupId都是独一无二的；
其次在我的员工类和最终返回前端的List集合中的结果类中，必须同时拥有groupId这个属性，否则还会出现rowKey is required这个报错，且也要保证结果类的groupId的值和与员工类的groupId的值都是独一无二的，否则还会出现key属性冲突的报错。
在这里我使用了将员工staffId赋值给员工的groupId，虽然这个做法从业务逻辑的角度讲并不合适，因为这俩东西不应该是一样的，但是此处的员工的groupId就不能理解成是一个小组的编号了，这个groupId具有的实际意义是帮助实现分层，所以一定要是独一无二的。

最终，解决了这些报错后，数据就可以正常显示：

console中也不会显示前端报错。