uni-app 有无树形下拉选择器

在uni-app中实现树形下拉选择器（TreeSelect），虽然官方组件库并未直接提供这一组件，但你可以通过自定义组件和递归渲染的方式来实现。以下是一个简化的实现示例，展示了如何使用递归组件来渲染树形结构，并结合下拉选择功能。

1. 创建递归组件 TreeNode.vue

<template>
  <view class="tree-node">
    <view @click="toggle" :class="{expanded: expanded}">
      {{ node.label }}
    </view>
    <view v-if="expanded" class="children">
      <tree-node
        v-for="(child, index) in node.children"
        :key="index"
        :node="child"
        @select="handleSelect"
      />
    </view>
  </view>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    node: Object
  },
  data() {
    return {
      expanded: false
    };
  },
  methods: {
    toggle() {
      this.expanded = !this.expanded;
    },
    handleSelect(node) {
      this.$emit('select', node);
    }
  }
};
</script>

<style scoped>
.tree-node {
  margin-left: 20px;
}
.expanded > view:first-child::before {
  content: '▾';
  display: inline-block;
  margin-right: 5px;
}
.tree-node > view:first-child::before {
  content: '▶';
  display: inline-block;
  margin-right: 5px;
}
.children {
  margin-left: 20px;
}
</style>

2. 创建主组件 TreeSelect.vue

<template>
  <view class="tree-select">
    <picker mode="selector" :range="flatList" @change="onPickerChange">
      <view class="picker">{{ selectedLabel }}</view>
    </picker>
    <view v-if="showTree" class="tree-container">
      <tree-node :node="treeData" @select="onNodeSelect" />
    </view>
  </view>
</template>

<script>
import TreeNode from './TreeNode.vue';

export default {
  components: { TreeNode },
  data() {
    return {
      treeData: { /* 树形数据结构 */ },
      flatList: [], // 用于picker的扁平化列表
      selectedLabel: '',
      showTree: false
    };
  },
  methods: {
    // 扁平化树形数据（此处省略具体实现）
    flattenTree(),
    onPickerChange(e),
    onNodeSelect(node) {
      this.selectedLabel = node.label;
      this.showTree = false;
    }
  },
  mounted() {
    this.flattenTree();
  }
};
</script>

注意

• flattenTree 方法需要实现，用于将树形数据扁平化为picker可用的列表。
• 样式部分可以根据需求调整。
• 上述代码仅展示了基本结构和思路，具体实现（如数据绑定、事件处理等）需根据实际需求完善。

通过这种方式，你可以在uni-app中实现一个基本的树形下拉选择器。