uniapp tree

Uniapp Tree 组件实现方法

Uniapp 本身没有内置的 Tree 组件，但可以通过第三方插件或自定义组件实现树形结构展示。以下是几种常见方法：

使用 uView UI 的 Tree 组件 uView UI 是一个流行的 Uniapp 组件库，提供了 Tree 组件。安装 uView 后可以直接使用：

<u-tree :list="treeData" />

自定义递归组件 创建一个递归组件实现树形结构。新建 tree.vue 组件：

<template>
  <view>
    <view v-for="item in data" :key="item.id">
      {{ item.label }}
      <tree v-if="item.children" :data="item.children" />
    </view>
  </view>
</template>

使用 uni-data-checkbox 模拟 通过 uni-data-checkbox 组件模拟树形选择：

<uni-data-checkbox 
  v-model="value" 
  :localdata="treeData" 
  multiple 
  text="label" 
  value="id" 
/>

树形数据结构处理

树形数据通常采用嵌套结构，示例格式：

const treeData = [
  {
    id: 1,
    label: '一级节点',
    children: [
      {
        id: 2,
        label: '二级节点'
      }
    ]
  }
]

扁平数据转树形结构可使用以下方法：

function buildTree(flatData) {
  const map = {}
  const roots = []
  flatData.forEach(item => {
    map[item.id] = { ...item, children: [] }
  })
  flatData.forEach(item => {
    if (item.parentId) {
      map[item.parentId].children.push(map[item.id])
    } else {
      roots.push(map[item.id])
    }
  })
  return roots
}

性能优化建议

对于大型树结构，建议实现虚拟滚动或懒加载：

<scroll-view scroll-y style="height: 100vh">
  <tree :data="treeData" />
</scroll-view>

展开/折叠功能可通过控制数据实现：

toggleExpand(item) {
  this.$set(item, 'expanded', !item.expanded)
}

事件处理

树组件常用事件包括节点点击、复选框变化等：

<u-tree 
  @node-click="handleNodeClick" 
  @checkbox-change="handleCheckChange"
/>

这些方法可以根据具体需求组合使用，实现不同复杂度的树形结构展示和交互功能。