很好用的uni-app节点树组件！

### lyTree 树组件（看文档！！！看文档！！！看文档！！！导入工程项目！有很多示例！） ### 重要！nvue版本已发布，在components/ly-tree-nvue中，功能与原始版本一致，样式有略微变动，欢迎下载使用，如有问题请加群及时反馈哦~~~ ### 感谢小伙伴们的支持，请点个五星好评~~ **心灵脆弱的程序媛求好评~~~切勿做伸手党和喷子** **有问题可以直接加QQ群：1079028385，在群里沟通哦~~** **pages.json配置（非常重要！！！小程序和APP端只显示一个层级、无法展开就是因为没有配置这个属性！！请使用复制粘贴！不要自己写错单词！）：** 提示：为了集中精力、减少包体积，2020年4月发布的HBuilderX 2.7版本起，及对应的App SDK包，将不再提供“自定义组件模式”。（uni小程序sdk本身也仅支持v3）。 经验证，如果项目只编译到APP端，这里可以不配置，但配置了也不回有影响，小程序端还是需要配置。 综上：这里的配置建议总是加上，避免小程序端无法展开节点 ```javascript "globalStyle": { ... "usingComponents": { "ly-tree-node": "/components/ly-tree/ly-tree-node" } } ``` **关于render-content：** ·因为uni非H5端目前不支持render函数，插件依赖于uni,目前这个需求还无法实现，如果有特殊的需求需要自定义节点样式，可以自行修改ly-tree-node哦~； **属性说明：** |属性名 |类型 |默认值 |说明 | |- |- |- |- | |nodeKey |String |-|必填，每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 | |treeData |Array |- |非懒加载时的展示数据 | |emptyText |String |暂无数据 |内容为空的时候展示的文本 | |renderAfterExpand |Boolean |true |是否在第一次展开某个树节点后才渲染其子节点 | |checkStrictly |Boolean |false |在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false，如果设置了checkOnlyLeaf为true，这里也将变为true | |defaultExpandAll |Boolean |false |是否默认展开所有节点 | |expandOnClickNode |Boolean |true |是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点 | |checkOnClickNode |Boolean |false |是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点 | |autoExpandParent |Boolean |true |是否在第一次展开某个树节点后才渲染其子节点 | |defaultCheckedKeys |Array |- |默认勾选的节点的 key 的数组 | |defaultExpandedKeys |Array |- |默认展开的节点的 key 的数组 | |currentNodeKey |String, Number |- |当前选中的节点 | |showCheckbox |Boolean |false |节点是否可被选择 | |showRadio |Boolean |false |节点是否可被单选 | |props |Object |见下文 |数据中对应的属性名 | |lazy |Boolean |false |是否懒加载子节点，需与 load 方法结合使用 | |highlightCurrent |Boolean |false |是否高亮当前选中节点，默认值是 false | |load |Function |- |加载子树数据的方法，仅当 lazy 属性为true 时生效 | |filterNodeMethod |Function |- |对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 | |accordion |Boolean |false |是否每次只打开一个同级树节点展开 | |indent |Number |18 |相邻级节点间的水平缩进，单位为像素 | |iconClass |String |- |自定义树节点的展开图标，图标class | |ready【新】 |Boolean |true |自主控制loading加载，避免数据还没获取到的空档出现“暂无数据”字样 | |showNodeIcon【新】 |Boolean |false |是否显示节点图标，如果配置为true,需要配置props中对应的图标属性名称 | |expandOnCheckNode【新】 |Boolean |true |节点被选中时展开节点 | |toggleExpendAll【新】 |Boolean |false |切换全部展开、全部折叠 | |childVisibleForFilterNode【新】 |Boolean |false |搜索时是否展示匹配项的所有子节点 | |checkOnlyLeaf【新】 |Boolean |false |是否最后一层叶子节点才显示单选/多选框| |expandCurrentNodeParent【新】 |Boolean |false |是否展开当前节点的父节点，设置当前节点时生效| |isInjectParentInNode【新】 |Boolean |false |是否向node示例中挂载parent（父节点实例），如果配置为true，那么在点击或者展开节点等事件中能直接获取到parent;如果数据量较大，建议不要在node节点中添加parent属性，会造成性能损耗| |defaultNodeIcon【新】 |String |- |当节点图标显示出错时，显示的默认图标| **基本用法：** ·请注意node-key必须配置，指数据中每个节点的唯一标志,打个比方： 如果数据中以id数据项当做节点的唯一标志，node-key就是"id"; 如果数据中以guid数据项当做节点的唯一标志，node-key就是"guid"; 如果数据中以personId数据项当做节点的唯一标志，node-key就是"personId"... ```html <template> <ly-tree :tree-data="treeData" :ready="ready" node-key="id" @node-expand="handleNodeExpand" @node-click="handleNodeClick"> </ly-tree> </template> ``` ```javascript import LyTree from '@/components/ly-tree/ly-tree.vue' export default { components: { LyTree }, data() { return { ready: false, // 这里用于自主控制loading加载状态，避免异步正在加载数据的空档显示“暂无数据” treeData: [] }; }, onLoad() { // 模拟异步请求 setTimeout(() => { this.treeData = [{ id: 1, label: '一级 1', children: [{ id: 11, label: '二级 1-1', children: [{ id: 111, label: '三级 1-1-1' }] }] }, { id: 2, label: '一级 2', children: [{ id: 21, label: '二级 2-1', children: [{ id: 211, label: '三级 2-1-1' }] }, { id: 22, label: '二级 2-2', children: [{ id: 221, label: '三级 2-2-1' }] }] }, { id: 3, label: '一级 3', children: [{ id: 31, label: '二级 3-1', children: [{ id: 311, label: '三级 3-1-1' }] }, { id: 32, label: '二级 3-2', children: [{ id: 321, label: '三级 3-2-1' }] }] }]; this.ready = true; }, 2000); }, methods: { // uni-app中emit触发的方法只能接受一个参数，所以会回传一个对象，打印对象即可见到其中的内容 handleNodeClick(obj) { console.log('handleNodeClick', JSON.stringify(obj)); }, handleNodeExpand(obj) { console.log('handleNodeExpand', JSON.stringify(obj)); } } }; ``` **这个时候可能有人提出：如果我的数据结构不是{id: 11, label: 'xx', children: []}，而是{personId: 11, name: 'xx', childs: []},该怎么办？？以下props属性配置** **props 属性说明：** |属性名 |类型 |默认值 |说明 | |- |- |- |- | |label |string, function(data, node) |-|指定节点标签为节点对象的某个属性值 | |icon[new] |String |- |指定节点图标为节点对象的某个属性值 | |children |string |- |指定子树为节点对象的某个属性值 | |disabled |String |boolean, function(data, node) |指定节点选择框是否禁用为节点对象的某个属性值 | |isLeaf |boolean, function(data, node) |true |指定节点是否