I have done this before. I think there are two options for this. The first is step-by-step loading, which should be possible, combined with ajax. The second method is one-time loading. The steps of this method are:
1. Query all categories (the category database must be created, the subcategory needs to have a parent_id field, and what level of field is needed, let’s call it level- -Depth)
2, find the maximum value of level
3, through the 3-layer foreach loop, the number of loops in the outermost layer is the maximum value of level, the two innermost layers are the core, and the innermost loop task is to The category is assigned to the array of the parent category, for example:
array(
0=>array('First-level category','First-level sub-category')
1=>array('First-level category 2','First-level subcategory')
}
The first-level subcategory is the second-level category (this can be known through depth). After inserting into a new array, remember to clean up the current array in the element group in time .
Note: There are two layers inside. The first layer is to cycle through all levels of categories in order, and the second layer is responsible for placing subcategories into the parent category array.

The result of the final generated array is:

First-level category 1
-------Second-level category 1
-------Second-level category 2
-------------Third-level category 1
-------------Third-level category 2
First-level category 2
-------Second-level category 1
Next, in the front-end page, loop , also layer by layer. At this time, you still need to cycle through the three levels of level and the categories will come out in sequence! ! !

json数据结构
{
    data:[{// 一级菜单
            id:1,
            level:1,
            pid:0 // 父级id，因为是一级菜单，所以为0
            menu:[{ // 二级菜单
                id:2,
                level:2,
                pid:1, // 父级id，因为是二级菜单，所以为上一层菜单的id    
                menu:[{ // 三级菜单
                    id:4,
                    level:3,
                    pid:2 // 父级id，因为是三级菜单，所以为上一层菜单的id    
                }
            },{
                id:3,
                level:2,
                pid:1 // 父级id，因为是二级菜单，所以为上一层菜单的id    
            },...{}]
        },...,{}]
}

前端使用递归来遍历这个json数据:

function handleData(data,arr){
    var newArr = arr || [];
    data.forEach(function(item,index){
        newArr.push(item);
        if(item.menu){
            handleData(item.menu,newArr);
        }
    });
    return newArr;
}