更新记录

1.0.0（2025-07-23） 下载此版本

版本号1.0.0

平台兼容性

uni-app

其他

🎄 shanTree 树形组件文档

shanTree 是一个高性能的 uni-app 树形组件，采用扁平数组和循环方式实现无限级树形结构，支持懒加载等特性。

🔨 基本用法

<template>
    <view class="content">
            <shanTree :showCheckbox="true" :showLevel="1" :data="treeData" :lazy="true" :load="handleLoadFun"
                @clickNode="handleClickNode" @checkboxChange="handleCheckboxChange" @extendNode="handleExtendNode">
            </shanTree>
    </view>
</template>

<script>
let that;
import shanTree from 'uni_modules/hashan-shanTree/wxcomponents/index'
export default {
    components: { shanTree },
    data() {
        return {
            treeData: []
        }
    },
    onLoad() {
        that = this;
        this.generateSampleData()
    },
    methods: {
        // 生成示例数据
        generateSampleData() {
            const data = [];
            let id = 1;
            // 生成根节点
            for (let i = 1; i <= 5; i++) {
                const rootNode = {
                    id: id++,
                    label: `根节点 ${i}`,
                    children: [],
                    level: 0,
                    ***: true
                };

                // 添加二级节点
                for (let j = 1; j <= 4; j++) {
                    const childNode = {
                        id: id++,
                        label: `子节点 ${i}-${j}`,
                        children: [],
                        level: 1,
                        ***: j % 2 === 0
                    };

                    // 添加三级节点
                    if (j % 2 === 0) {
                        for (let k = 1; k <= 3; k++) {
                            const grandChild = {
                                id: id++,
                                label: `孙节点 ${i}-${j}-${k}`,
                                level: 2,
                                ***: true,
                                count: Math.floor(Math.random() * 10) + 1
                            };
                            childNode.children.push(grandChild);
                        }
                    }

                    rootNode.children.push(childNode);
                }

                data.push(rootNode);
            }
            console.log('data', data);
            this.treeData = data;
        },

        //模拟加载
        loadChildren(node) {
            return new Promise((resolve) => {
                // 模拟异步加载
                setTimeout(() => {
                    const children = [];
                    for (let i = 1; i <= 5; i++) {
                        children.push({
                            id: node.id * 10 + i,
                            label: `子节点 ${node.label}-${i}`,
                            level: node.level + 1,
                            ***: true,
                            children: []
                        });
                    }
                    resolve(children);
                }, 1000);
            })
        },
        // 懒加载方法
        handleLoadFun(node, resolve) {
            that.loadChildren(node).then((children) => {
                resolve(children);
            });
        },
        // 点击节点方法
        handleClickNode(node) {
            console.log('handleClickNode', node);
        },
        // 选择框状态变化方法
        handleCheckboxChange(node) {
            console.log('handleCheckboxChange', node);
        },
        // 展开/折叠方法
        handleExtendNode(node) {
            console.log('handleExtendNode', node);
        }

    }
}
</script>

📚 属性

🛠 方法

🎨 事件

🌟 特性

🚀 高性能

• 采用扁平数组结构，避免递归带来的性能问题
• 大数据量流畅渲染

🌳 功能丰富

• 支持无限级树形结构
• 支持懒加载
• 支持节点选择
• 支持自定义节点内容
• 支持展开/折叠状态控制

💡 实现原理

1. 数据结构优化：

   • 使用 flattenedTree 扁平数组存储所有可见节点
   • 通过 level 控制缩进层级
   • 通过 expanded 控制展开状态

2. 性能优化点：

   // 示例代码片段
   flattenTree() {
    const stack = [...this.treeData].reverse();
    while (stack.length) {
      const node = stack.pop();
      // ...处理节点
      if (node.expanded && node.children?.length) {
        stack.push(...[...node.children].reverse());
      }
    }
   }

   ---

   📝 使用建议

3. 对于大数据量，建议开启懒加载

4. 节点数据建议包含以下字段：

   {
    id: 1,
    label: '节点名称',
    ***: true, // 是否可能有子节点
    children: [], // 子节点数组
    level: 0, // 层级
    expanded: false // 是否展开
   }

🐛 常见问题

: 懒加载的节点无法展开？
A: 确保返回的子节点数据包含必要的属性：level, `` 等

***: 节点状态不更新？
A: 使用 this.$set 确保响应式更新，如：

this.$set(node, 'expanded', true);

***: 懒加载方法无法使用 A: 确保 this 指向正确的上下文，如：let that = this;