在一段漫长的雪藏后，我们在 layui 2.5.0 的版本中重新创作了 tree，以便它能够更加适用于绝大多数业务场景，而风格依然遵循 layui 独有的极简和清爽。需要提醒的是，如果您的项目中仍然采用了 layui 2.5 版本之前的 tree，它将不被兼容，请尽快修改为以下新的调用方式。
模块加载名称：tree
<link rel="stylesheet" href="/static/layui/css/layui.css">
<script src="/static/layui/layui.all.js" charset="utf-8"></script>
目前 tree 组件提供以下基础参数，可根据需要进行相应的设置
| 参数选项 | 说明 | 类型 | 示例值 |
|---|---|---|---|
| elem | 指向容器选择器 | String/Object | - |
| data | 数据源 | Array | 详见数据选项 |
| id | 设定实例唯一索引，用于基础方法传参使用。 | String | - |
| showCheckbox | 是否显示复选框 | Boolean | false |
| edit | 是否开启节点的操作图标。默认 false。
|
Boolean/Array | ['update', 'del'] |
| accordion | 是否开启手风琴模式，默认 false | Boolean | false |
| onlyIconControl | 是否仅允许节点左侧图标控制展开收缩。默认 false（即点击节点本身也可控制）。若为 true，则只能通过节点左侧图标来展开收缩 | Boolean | false |
| isJump | 是否允许点击节点时弹出新窗口跳转。默认 false，若开启，需在节点数据中设定 link 参数（值为 url 格式） | Boolean | false |
| showLine | 是否开启连接线。默认 true，若设为 false，则节点左侧出现三角图标。 | Boolean | true |
| text | 自定义各类默认文本，目前支持以下设定： text: {
defaultNodeName: '未命名' //节点默认名称
,none: '无数据' //数据为空时的提示文本
}
|
Object | - |
我们将 data 参数称之为数据源，其内部支持设定以下选项
| 属性选项 | 说明 | 类型 | 示例值 |
|---|---|---|---|
| title | 节点标题 | String | 未命名 |
| id | 节点唯一索引值，用于对指定节点进行各类操作 | String/Number | 任意唯一的字符或数字 |
| field | 节点字段名 | String | 一般对应表字段名 |
| children | 子节点。支持设定选项同父节点 | Array | [{title: '子节点1', id: '111'}] |
| href | 点击节点弹出新窗口对应的 url。需开启 isJump 参数 | String | 任意 URL |
| spread | 节点是否初始展开，默认 false | Boolean | true |
| checked | 节点是否初始为选中状态（如果开启复选框的话），默认 false | Boolean | true |
| disabled | 节点是否为禁用状态。默认 false | Boolean | false |
树组件还在持续完善。
layui - 在每一个细节中，用心与你沟通
