uniapp 树形下拉选择如何实现

在uniapp中如何实现树形下拉选择功能？目前官方组件库里没有找到现成的树形下拉组件，尝试过用uView的picker和自定义组件拼接，但多层嵌套数据展示效果不理想。求问有没有成熟的解决方案或推荐的开源组件？最好能支持懒加载和复选框功能。

2 回复

在uniapp中实现树形下拉选择，可以使用uView UI的<u-tree-select>组件。先安装uView，然后在页面引入组件，配置树形数据即可。数据格式需包含id、label和children字段。


在 UniApp 中实现树形下拉选择，可以通过以下步骤完成，使用 uView UI 组件库的 <u-tree-select> 组件（推荐）或自定义实现。以下是两种方法：

方法一：使用 uView UI 组件库（简单高效）

  1. 安装 uView UI（如果未安装）：

    • 在 HBuilder X 中，通过插件市场安装 uView UI，或通过 npm 安装：
      npm install uview-ui
    • 在 main.js 中引入：
      import uView from 'uview-ui';
Vue.use(uView);

  2. 在页面中使用 <u-tree-select>：

    • 示例代码：
      <template>
  <view>
    <u-tree-select
      :list="treeData"
      :value="selectedValue"
      @change="onTreeSelectChange"
    />
  </view>
</template>

<script>
export default {
  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' },
            { label: '子节点2-2', value: '2-2' }
          ]
        }
      ],
      selectedValue: []
    };
  },
  methods: {
    onTreeSelectChange(value) {
      this.selectedValue = value;
      console.log('选中值:', value);
    }
  }
};
</script>
    • 说明：
      • list：树形数据，需包含 label（显示文本）、value（值）和 children（子节点）。
      • value：绑定选中的值，格式为数组（例如 ['1', '1-1']）。
      • @change：选择变化事件，返回选中节点的 value 数组。

方法二：自定义实现（灵活但复杂）

如果不想依赖组件库，可以结合 <picker> 和递归组件实现：

  1. 创建递归组件（如 tree-select.vue）处理层级选择。
  2. 使用 <picker> 组件逐级选择，通过动态数据更新选项。
    • 示例简化代码（需自行完善）：
      <template>
  <view>
    <picker @change="onLevelChange" :value="index" :range="currentOptions">
      <view>{{ currentSelection || '请选择' }}</view>
    </picker>
    <!-- 递归渲染子级选择器 -->
    <tree-select v-if="childData" :data="childData" @select="onChildSelect" />
  </view>
</template>

<script>
export default {
  props: ['data'],
  data() {
    return {
      index: 0,
      currentOptions: this.data.map(item => item.label),
      childData: null
    };
  },
  methods: {
    onLevelChange(e) {
      const idx = e.detail.value;
      this.childData = this.data[idx].children;
      this.$emit('select', this.data[idx].value);
    },
    onChildSelect(value) {
      this.$emit('select', value);
    }
  }
};
</script>

注意事项

  • 数据格式：确保树形数据嵌套正确，包含 label、value 和 children 字段。
  • 兼容性：测试不同平台（如微信小程序、H5），确保组件正常渲染。
  • 性能：如果数据量较大，考虑使用虚拟滚动或分加载优化。

使用 uView UI 的 <u-tree-select> 是最快捷的方式，推荐优先采用。如果需要高度定制，再选择自定义实现。

回到顶部