更新记录

1.0.0（2026-06-28）

初始化

平台兼容性

uni-app(3.7.13)

uni-app x(3.7.13)

其他

w-cascader-picker适用于uni-app项目的多级选择组件

本组件目前兼容微信小程序、H5、APP端

本组件支持省市区选择、年月日选择、多级选择、自定义选择级数据自定义选择项、三级级联、支持精准搜索选项

从uniapp插件市场导入 遇到问题或有建议可以留言反馈
如果觉得组件不错，给五星鼓励鼓励爱你哟！

注意

作者不介意你对组件源码进行改造使用，为了开源更加高效，谢谢你的配合；为了节省不必要的沟通浪费，以下情况请不要再反馈给作者，请自行解决；

在这感各位的理解，我支持开源，但是作者时间有限；谢谢各位的配合；在这里期望我写的小小插件能为你提供便捷；

1.如果你对源码进行了修改使用，请不需要对作者做任何的反馈，作者确实没有空陪你做技术分析解答；
2.如果你引入插件，连插件是否有正常被uniapp框架识别解析都不清楚，请你换个插件使用；
3.如果你引入插件，针对自己项目进行功能改造的，请自行仔细阅读源码并了解其原理，自行改造；这里作者不愿意浪费过多时间进行技术解答；
4.理论上作者不再解决由于本地开发环境问题所导致的插件使用问题，请自行到uniapp官网学习解决；

使用方式（vue3 demo）

vue2的使用方式暂不支持

<template>
  <view class="content">
    <view class="btns" @click="openpopup()">
      打开选择器
    </view>
    <w-cascader-picker :data="options" :index="pickerIndex" hasSearch :visible="popupVisible"
      @selectIndex="(val) => selectIndex(val)" @close="handlePopupClose()" rangeKey="label" />
  </view>
</template>

<script setup>
  import {
    nextTick,
    ref,
  } from 'vue'
  import {
    onLoad,
    onReady,
    onPullDownRefresh,
    onReachBottom
  } from '@dcloudio/uni-app'

  const popupVisible = ref(false)
  // 级联选择器数据
  const options = ref([{
      value: '110000',
      label: '北京市',
      children: [{
        value: '110100',
        label: '北京市',
        children: [{
            value: '110101',
            label: '东城区',
          },
          {
            value: '110102',
            label: '西城区',
          },
        ],
      }],
    },
    {
      value: '120000',
      label: '天津市',
      children: [{
        value: '120100',
        label: '天津市',
        children: [{
            value: '120101',
            label: '和平区',
          },
          {
            value: '120102',
            label: '河东区',
          },
        ],
      }],
    },
  ])
  const pickerIndex = ref([0, 0, 0])

  const openpopup = () => {
    popupVisible.value = true
  }

  const selectIndex = (val) => {
    console.log(val, 'selectIndex')
  }

  const handlePopupClose = () => {
    popupVisible.value = false
  }
  onLoad(() => {

  })
</script>

<style scoped lang="scss">
  .content {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .btns {
    background: #E41A37;
    padding: 20rpx;
    border-radius: 8rpx;
    color: #fff;
  }
</style>

options数据格式(注意：组件自动检查数据源options的子集关键children字段，自动识别层级关系)：

属性说明