更新记录

1.0.0（2026-01-03） 下载此版本

可以过滤的uni-data-picker，使用方式和uni-data-picker基本一致。

平台兼容性

uni-app

其他

gforce-filter-picker

可以过滤的uni-data-picker，使用方式和uni-data-picker基本一致。

使用方式：

<!-- 基本使用示例 -->
  <view class="section">
    <text class="section-title">选择报名单位</text>
    <gforce-filter-picker 
      ref="memberPicker"
      v-model="order.memberId"
      :localdata="memberList"
      @change="memberChange"
      popup-title="请选择报名单位"
      placeholder="请选择单位"
      search-placeholder="搜索单位名称"
    />
  </view>

  <!-- 带描述的使用示例 -->
  <view class="section">
    <text class="section-title">选择城市</text>
    <gforce-filter-picker 
      ref="cityPicker"
      v-model="selectedCity"
      :localdata="cityList"
      :show-desc="true"
      @change="cityChange"
      popup-title="请选择城市"
      placeholder="请选择城市"
    />
  </view>

  <!-- 多选示例 -->
  <view class="section">
    <text class="section-title">选择标签（多选）</text>
    <gforce-filter-picker 
      ref="tagPicker"
      v-model="selectedTags"
      :localdata="tagList"
      :multiple="true"
      @change="tagChange"
      popup-title="请选择标签"
      placeholder="请选择标签"
    />
  </view>

  <!-- 操作按钮 -->
  <view class="section">
    <view class="button-group">
      <button class="button" @click="setMemberValue">设置单位</button>
      <button class="button" @click="getMemberValue">获取单位</button>
      <button class="button" @click="clearMember">清空单位</button>
    </view>

    <view class="button-group">
      <button class="button" @click="openMemberPicker">打开选择器</button>
      <button class="button" @click="closeMemberPicker">关闭选择器</button>
    </view>
  </view>

数据格式：

  // 单位列表数据
  memberList: [
    { text: '阿里巴巴集团', value: 'alibaba' },
    { text: '腾讯科技有限公司', value: 'tencent' },
    { text: '百度在线网络技术公司', value: 'baidu' },
    { text: '字节跳动科技有限公司', value: 'bytedance' },
    { text: '华为技术有限公司', value: 'huawei' },
    { text: '小米科技有限责任公司', value: 'xiaomi' },
    { text: '京东集团', value: 'jd' },
    { text: '网易公司', value: 'netease' },
    { text: '美团公司', value: 'meituan' },
    { text: '滴滴出行科技有限公司', value: 'didi' }
  ],

  // 城市列表数据（带描述）
  cityList: [
    { 
      text: '北京市', 
      value: 'beijing',
      desc: '中国首都'
    },
    { 
      text: '上海市', 
      value: 'shanghai',
      desc: '经济中心'
    },
    { 
      text: '广州市', 
      value: 'guangzhou',
      desc: '广东省省会'
    },
    { 
      text: '深圳市', 
      value: 'shenzhen',
      desc: '经济特区'
    },
    { 
      text: '杭州市', 
      value: 'hangzhou',
      desc: '浙江省省会'
    },
    { 
      text: '成都市', 
      value: 'chengdu',
      desc: '四川省省会'
    },
    { 
      text: '武汉市', 
      value: 'wuhan',
      desc: '湖北省省会'
    },
    { 
      text: '南京市', 
      value: 'nanjing',
      desc: '江苏省省会'
    },
    { 
      text: '西安市', 
      value: 'xian',
      desc: '陕西省省会'
    }
  ],

  // 标签列表数据
  tagList: [
    { text: '科技', value: 'tech' },
    { text: '金融', value: 'finance' },
    { text: '教育', value: 'education' },
    { text: '医疗', value: 'medical' },
    { text: '电商', value: 'ecommerce' },
    { text: '游戏', value: 'game' },
    { text: '社交', value: 'social' },
    { text: '旅游', value: 'travel' },
    { text: '餐饮', value: 'food' },
    { text: '房地产', value: 'realestate' }
  ]
}