关于Element表格下拉框或树形结构数据的展示

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、pandas是什么？
• 二、使用步骤
  • 1.引入库
  • 2.读入数据
• 总结

---

前言

我们使用Element官网的表格做树形结构展示，具体使用看官网链接组件 | Element

一、后端的数据格式

主要是实体类和VO的格式要选择正确，在xml文件中新建一个resulttype类型的实体类并且给它取一个id名称，我们需要将我们需要在下拉框展示的一对多的数据封装成一个集合，collection

这个result type的id为

productMaterialMap

在实体类里面声明这个集合。

这里的数据放的是不存在数据库中但是我们需要展示的数据，设置成

@TableField(exist = false)，

直接写查询语句，让我们返回的结果类型是上面设置的resulttype，

查询的结果类似这样，把需要树形展示的数据，用<colllection>里面取到的别名命名。

二、前端的展示

前端接收到的数据格式是这样的

前端代码：

 

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

row-key属性实际的作用是标识表格每行数据是通过哪个属性来进行区别的，一般而言id比较常见，可以根据自己的实际情况决定一下，要根据上面来分组。首先要明确的是，数据是在后端就分好了层次而非在前端进行分层，前端传递数据时只需传递已经封装好的List集合，通过一个空的数组去接收。再通过指定这个row-key的值，来识别根据哪个属性是进行分层。
在这里我后端进行分层的方法是：先将我的员工类的对象存入到一个List集合中，再定义一个Result类为最终结果类：这个最终结果类中有两个属性，groupId属性和List属性。然后将这个Result也存入一个List集合中即List<Result>，Result中又有Id和List<员工类>两个属性，这样就完成了分层。