## layuiadmin iframe 2020版 引入 authtree 组件 + 第一步：为权限树提供容器 + 第二步：下载源码并引入插件 + 第三步：异步获取权限数据并渲染 >[danger] 第一步：为权限树提供容器 + 权限树容器：`id="LAY-auth-tree-index"` + 容器需要包含在 `form.layui-form > div.layui-form-item > div.layui-input-block`，否则无法渲染多选框 ```html <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">角色名称</label> <div class="layui-input-block"> <input class="layui-input" type="text" name="name" placeholder="请输入角色名称" /> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">选择权限</label> <div class="layui-input-block"> <div id="LAY-auth-tree-index"></div> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" type="submit" lay-submit lay-filter="LAY-auth-tree-submit">提交</button> <button class="layui-btn layui-btn-primary" type="reset">重置</button> </div> </div> </form> ``` >[danger] 第二步：下载源码并引入插件 + 配置扩展目录的模板输出替换 `__LAYUIADMIN_EXTEND__` ``` // 模板输出字符串替换 'tpl_replace_string' => [ // layuiadmin 静态资源 '__LAYUIADMIN__' => '/static/layuiadmin', // authtree 权限树扩展组件 '__AUTHTREE__' => '/static/layuiadmin/lib/extend/authtree', ], ``` + 将 `layui_exts` 目录拷贝到 extend 目录下并重命名为 `authtree`  + 加载 `authtree` 组件  >[danger] 第三步：异步获取权限数据并渲染 ``` $.ajax({ url: 'tree.json', dataType: 'json', success: function(data){ var trees = data.data.trees; // #LAY-auth-tree-index 权限树容器 authtree.render('#LAY-auth-tree-index', trees, { inputname: 'authids[]', layfilter: 'lay-check-auth', autowidth: true, }); } }); ``` >[danger] 效果示例