layui的tabletree扩展组件

2021 年 1 月 30 日
笔记

需求：点击父级菜单展示子级菜单

难点：某个父级菜单下面有5000条子级菜单（有点坑），当我想把这5000条子级菜单塞到父级菜单下面的时候完蛋了，页面卡死了…

解决：tabletree这组件我发现用的人是真的少，没办法只能硬着头皮去看这么low的组件js源码。下面是解决步骤，希望能帮助到和我遇到一样困惑的小盆友。

步骤一：下图一是我页面上的代码，思路其实就是先判断子级菜单的数量，如果子级菜单少于200条的话就直接用组件的obj.async(数组)；把子级菜单数组塞给父级菜单，这个方法会自动局部刷新（还是比较好用的，layui官方文档没有讲到这个方法，自己开源码找到的，真坑）；如果子级菜单多于200条的话就把查询到的子级菜单按200条一批分批塞给父级菜单，这里还有个小问题，我这一批塞成功后这个obj.async()方法没有返回值，日了狗了还得看图二tableTree.js源码，发现每当这个obj.async()方法执行完后能获取obj.data.treeList，这样就有实现思路了，我先定义了一个临时变量dataList = [],当obj.async()方法执行完一批后给dataList = obj.data.treeList赋值，判断dataList是否大于0，大于0说明这批数据塞成功了，然后dataList = []赋值空，去塞下一批数据。

图一：（我本地页面）