uniapp树形选择

uniapp树形选择实现方法

使用uni-data-checkbox组件

uniapp内置的uni-data-checkbox组件支持树形结构选择，适用于多级分类场景。配置时需要将数据格式化为树形结构。

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

data() {
  return {
    value: [],
    treeData: [{
      id: '1',
      name: '一级',
      children: [{
        id: '1-1',
        name: '二级'
      }]
    }]
  }
}

自定义递归组件

创建递归组件实现树形选择器，适合需要高度自定义的场景。

<!-- tree-selector.vue -->
<template>
  <view>
    <view v-for="item in data" :key="item.id">
      <checkbox :value="item.id" :checked="value.includes(item.id)"/>
      <text>{{item.name}}</text>
      <tree-selector 
        v-if="item.children" 
        :data="item.children"
        :value="value"
        @change="$emit('change', $event)"
      />
    </view>
  </view>
</template>

使用第三方插件

uView UI等第三方组件库提供成熟的树形选择组件，安装后可直接使用。

<u-tree 
  :list="list" 
  :checked="checked" 
  @check="check"
></u-tree>

数据格式化处理

后端返回的扁平数据需要转换为树形结构，常用方法：

function buildTree(items, id = null, link = 'parentId') {
  return items
    .filter(item => item[link] === id)
    .map(item => ({ ...item, children: buildTree(items, item.id) }))
}

性能优化建议

大数据量时采用懒加载策略，初始只加载顶层节点，点击时再加载子节点。可配合uni.loadFontFace预加载必要资源。

树形选择实现需根据具体需求选择方案，简单场景用内置组件，复杂需求建议使用递归组件或第三方库。数据处理时注意ID唯一性和父子关系准确性。