更新记录

1.0.2（2026-07-01）

修复远程搜索问题
新增选项disabled功能介绍

1.0.1（2026-07-01）

新增远程搜索功能 新增选项插槽功能

1.0.0（2026-06-30）

初始化

平台兼容性

uni-app(3.7.13)

其他

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

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

本组件支持单选，多选，本地搜索，远程搜索、slot等功能。

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

注意：该组件需要配合uni-popup使用，如果未安装该组件，请安装后重启项目！！！

vue2的使用方式暂不支持

使用方式（vue3 demo）

<template>
  <view class="content">
    <view class="btns" @click="openpopup()">
      打开选择器
    </view>
    <w-selector remote :multiple="false" :both="false" :data="options" :selecteds="pickerIndex" filterable
      :visible="popupVisible" :remoteMethod="remoteMethod" @selectIndex="(val) => selectIndex(val)"
      @close="handlePopupClose()" rangeKey="label">
      <template #option="{ option, index }">
        <view>
          {{ index + 1 }}.{{ option.label }}
        </view>
      </template>
    </w-selector>
  </view>
</template>

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

  const popupVisible = ref(false)
  const orgOptions = [{
      value: '1',
      label: '选项1',
    },
    {
      value: '2',
      label: '选项2',
      // 如果想给某项禁用，直接传入下面的属性
      disabled: true
    },
    {
      value: '3',
      label: '选项3',
    },
    {
      value: '4',
      label: '选项4',
    },
    {
      value: '5',
      label: '选项5',
    }
  ]
  // 级联选择器数据
  const options = ref(orgOptions)
  const pickerIndex = ref('1')

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

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

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

  const remoteMethod = (query) => {
    if (query !== '') {
      setTimeout(() => {
        options.value = orgOptions.filter(item => {
          return item.label.indexOf(query) > -1;
        });
        console.log(options.value, 'options.value')
      }, 200);
    } else {
      options.value = orgOptions;
    }
  }

  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数据格式(注意：组件自动检查数据源子项的label和value字段)

属性说明