uniapp 树形下拉框如何实现

在uniapp中如何实现树形下拉框？需要支持多级分类展示，类似省市区的层级选择效果。目前尝试了uni-data-picker组件但无法满足需求，自定义实现又遇到性能问题。请问有没有成熟的解决方案或推荐的开源组件？最好能兼容H5和小程序平台。

2 回复

使用uni-data-select组件，结合uniCloud云数据库。先创建树形数据表，通过parent_id字段关联父子节点。配置组件tree属性为true，传入数据即可自动渲染树形结构。


在 UniApp 中实现树形下拉框，可以使用第三方组件库（如 uni-tree-select）或自定义实现。以下是两种方法：

方法一：使用 uni-tree-select 组件

  1. 安装组件：

    • 通过 HBuilderX 插件市场导入 uni-tree-select，或通过 npm 安装（需配置 easycom）。

  2. 基本用法：

    <template>
  <view>
    <uni-tree-select
      :data="treeData"
      v-model="selectedValue"
      placeholder="请选择"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '节点1',
          children: [
            { id: 2, label: '子节点1' },
            { id: 3, label: '子节点2' }
          ]
        }
      ],
      selectedValue: []
    };
  }
};
</script>
    • data：树形数据，需包含 id、label、children 字段。
    • v-model：绑定选中的值（数组形式，支持多选）。

方法二：自定义实现（基于 picker 和递归）

  1. 使用多列选择器：
    <template>
  <view>
    <picker
      mode="multiSelector"
      :range="multiArray"
      @change="onPickerChange"
    >
      <view>当前选择：{{ selectedLabels.join('/') }}</view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          label: '节点1',
          children: [
            { label: '子节点1' },
            { label: '子节点2' }
          ]
        }
      ],
      multiArray: [],
      selectedLabels: []
    };
  },
  mounted() {
    this.multiArray = this.buildPickerData(this.treeData);
  },
  methods: {
    buildPickerData(data, level = 0, result = []) {
      if (!result[level]) result[level] = [];
      data.forEach(item => {
        result[level].push(item.label);
        if (item.children) {
          this.buildPickerData(item.children, level + 1, result);
        }
      });
      return result;
    },
    onPickerChange(e) {
      const indices = e.detail.value;
      this.selectedLabels = this.multiArray.map((arr, i) => arr[indices[i]]);
    }
  }
};
</script>
    • 说明：将树形数据转换为多列数据，通过 picker 的 multiSelector 模式实现。

注意事项：

  • 数据格式：确保树形数据符合组件要求（如 id、label、children）。
  • 平台兼容性：测试各端（小程序、H5等）的显示效果。
  • 性能优化：若数据量大，建议使用虚拟滚动或分加载。

根据需求选择合适的方法，推荐优先使用组件库以节省开发时间。

回到顶部