[參考文檔](https://fly.layui.com/extend/atree/)
CSS
```
<style>
.layui-atree li {
margin-left: 30px;
}
.layui-atree li ul {
display: none;
margin-left: 0px;
}
</style>
```
HTML
```
<script type="text/html" template
lay-done=" setTimeout(function(){layui.data.use(d);},0);"
id="TPL_layout"
lay-url="{{ layui.setter.apiUrl.SlopsApi }}/GetMenuInfo?bidID={{ layui.data(layui.setter.tableName).bidID || 0 }}">
<div class="layui-card">
<!-- <ul class="layui-nav layui-nav-tree " lay-filter="layadmin-system-side-menu" lay-shrink="all" class="menu" id="admin-menumange-mune"> -->
<ul id="admin-menumange-menu">
</ul>
</div>
</script>
```
JS
```
<script>
layui.use(['admin', 'form', 'table', 'laytpl', 'laydate', 'atree'], function () {
var $ = layui.$
, view = layui.view
, admin = layui.admin
, hongbo = layui.hongbo
, element = layui.element
, laydate = layui.laydate
, laytpl = layui.laytpl
, layer = layui.layer
, atree = layui.atree
, table = layui.table
, form = layui.form;
layui.data.use = function (d) {
debugger
var nodes =[];
d.tables.forEach(function (item){
var children = [];
item.list.forEach(function(child){
var chds;
if(child.list&&child.list.length){
chds = [];
child.list.forEach(function (chd){
chds.push({
name: chd.title,
id: chd.id
});
});
}
children.push({
name: child.title,
id: child.id,
children: chds
});
});
var node ={
name: item.title,
id: 1,
alias: 'changyong',
children: children
};
nodes.push(node);
});
var tree = layui.atree({
elem: '#admin-menumange-menu' //指定元素
, skin: 'as' //設定皮膚
, deleteBtnLabelKey: '122'
, addBtnLabelKey: '24'
//,target: '_blank' //是否新選項卡打開（比如節點返回href才有效）
// drag: true,
, spreadAll: true
,nodes: nodes
,click :function(item){
debugger
if(item.children){
}
}
})
};
});
</script>
```
