树状结构列表,这个技术点之前有写过了,是基于vue讲解,但似乎都没有解决痛点,最基础的原生JS该怎么实现呢?
这篇文章会全面详细的介绍树状结构列表的实现,从数据处理成树状结构,到动态生成dom节点渲染页面。
确定原始数据结构
原始数据是需要按照下面这种结构来定义的,如果原始数据已经是被后端处理成树状结构,就可以省略这一步骤。
使用map处理数据
把数组val打印出来看一下。
html结构
动态创建dom
将动态创建dom封装成一个方法,里面使用了递归。循环val数组调用这个方法,即可以实现动态创建dom。