uniapp下拉式的树形组件如何实现

在uniapp中如何实现下拉式的树形组件？目前需要一个支持多级展开的树形选择器，最好能兼容H5和小程序平台。请问有没有现成的组件推荐，或者需要自己实现的话，具体应该怎么操作？希望有经验的开发者能分享一下实现思路或示例代码。

2 回复

使用uni-app的<uni-tree-select>组件，或基于<picker>和<tree>自定义实现。步骤如下：

  1. 安装uni-tree-select插件或引入tree组件；
  2. 准备树形数据，设置父子节点关系；
  3. 绑定选择事件，处理选中数据；
  4. 自定义样式，优化下拉交互。

简单快捷，适合移动端树形选择。


在 UniApp 中实现下拉式树形组件，可以通过结合 picker 组件和自定义树形结构数据来实现。以下是实现步骤和示例代码：

实现思路

  1. 数据准备：使用嵌套数组或对象表示树形结构。
  2. 组件选择：使用 picker 组件作为下拉触发器，显示选中项。
  3. 自定义弹层：通过 uni-popup 或自定义弹层展示树形列表，支持展开/折叠和选择。
  4. 交互逻辑：点击选项可展开子节点，选择叶子节点后更新 picker 显示并关闭弹层。

示例代码

1. 数据示例

data() {
  return {
    treeData: [
      {
        label: '节点1',
        value: '1',
        children: [
          { label: '子节点1-1', value: '1-1' },
          { label: '子节点1-2', value: '1-2' }
        ]
      },
      {
        label: '节点2',
        value: '2',
        children: [
          { label: '子节点2-1', value: '2-1' }
        ]
      }
    ],
    selectedValue: '',
    selectedLabel: '',
    showTree: false // 控制弹层显示
  }
}

2. 模板结构

<view>
  <!-- 下拉触发器 -->
  <picker :value="selectedValue" @click="showTree = true" mode="selector">
    <view class="picker">{{ selectedLabel || '请选择' }}</view>
  </picker>

  <!-- 树形弹层 -->
  <uni-popup v-if="showTree" type="bottom" @maskClick="showTree = false">
    <view class="tree-popup">
      <view class="tree-node" v-for="node in treeData" :key="node.value">
        <view @click="toggleNode(node)">
          <text>{{ node.expanded ? '▼' : '►' }}</text>
          <text>{{ node.label }}</text>
        </view>
        <view v-if="node.expanded && node.children" class="children">
          <view v-for="child in node.children" :key="child.value" 
                @click="selectNode(child)" class="child-node">
            {{ child.label }}
          </view>
        </view>
      </view>
    </view>
  </uni-popup>
</view>

3. 方法实现

methods: {
  // 切换节点展开状态
  toggleNode(node) {
    if (node.children) {
      this.$set(node, 'expanded', !node.expanded);
    } else {
      this.selectNode(node); // 叶子节点直接选择
    }
  },
  
  // 选择节点
  selectNode(node) {
    this.selectedValue = node.value;
    this.selectedLabel = node.label;
    this.showTree = false; // 关闭弹层
  }
}

4. 样式示例

.tree-popup {
  background: #fff;
  padding: 20rpx;
  max-height: 60vh;
  overflow-y: auto;
}

.tree-node {
  padding: 10rpx 0;
}

.children {
  padding-left: 40rpx;
}

.child-node {
  padding: 8rpx 0;
  color: #666;
}

使用说明

  • 依赖：需要安装 uni-popup 组件（通过 HBuilderX 直接导入或 npm 安装）。
  • 优化：可添加搜索功能、多选支持或异步加载数据。
  • 兼容性：确保在 pages.json 中注册 uni-popup 组件（如使用）。

此方案通过 picker 触发自定义树形弹层，结构清晰且易于扩展。根据实际需求调整数据结构和样式即可。

回到顶部