更新记录

1.0.4（2023-11-19） 下载此版本

1. 合并到官方uni-data-picker版本到1.1.2

1.0.3（2022-08-17） 下载此版本

1. 添加示例项目

1.0.2（2022-08-17） 下载此版本

1. serchFn 自定义搜索函数添加异步支持
2. serchFn 自定义搜索函数添加回调支持
3. 修正 readme 中的描述错误
4. 包内的uni-*组件修改为song-*组件，防止冲突

平台兼容性

DataPicker 级联选择

关联组件：uni-data-pickerview、uni-load-more、uni-list-item、uni-easyinput、uni-icons、uni-badge。

<song-data-picker> 是一个选择类datacom 组件，是在官方的uni-data-picker(0.1.8)的基础上进行的修改，添加了搜索功能。

示例详见github.

此组件在使用中遇到任何问题，可在github下载源码和简易 demo 自行调试，也可以根据下列格式发送邮件到codersong@qq.com：

错误信息：
使用场景：
复现顺序：

** 复现数据或者有现成的复现代码，请打包后添加附件发送

此处只列举新增的属性，原有的属性与事件可以在官方uni-data-picker中查看

支持单列、和多列级联选择。列数没有限制，如果屏幕显示不全，顶部 tab 区域会左右滚动。

<song-data-picker> 组件尤其适用于地址选择、分类选择等选择类。

使用搜索功能时会进行所有层级的递归搜索。

平台差异说明

暂不支持在 nvue 页面中使用

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册componets。

API

DataPicker Props

目前所有的 props 都是在官方的 uni-data-picker(1.0.4)的基础上进行的添加，下边只标注新增的属性

searchFn 示例

<template>
  <view>
    <song-data-picker :localdata="items" popup-title="请选择班级" :openSearch="true" :searchFn="mySearchFn" @change="onchange" @nodeclick="onnodeclick"></song-data-picker>
  </view>
</template>
{
    methods:{
        /**
         * searchList: 全量列表数据:{searchText:显示字符串,value:值}
         * searchWord: 输入的查询字符串
         */
        // 实现一：通常情况下使用返回值
        mySearchFn(searchList, searchWord) {
            return searchList.filter(x => x.searchText.includes(searchWord));
        },
        // 实现二：在函数内部通过callback设置查询结果，可在异步场景下使用
        mySearchFn2(searchList, searchWord, callback) {
            const result = searchList.filter(x => x.searchText.includes(searchWord));
            callback(result);
        },
        // 实现三：返回一个Promise，可在异步场景下使用
        mySearchFn3(searchList, searchWord, callback) {
            const result = searchList.filter(x => x.searchText.includes(searchWord));
            return Promise.resolve(result);
        },
        // 实现四：返回一个Promise，可在异步场景下使用（实现三的变体）
        async mySearchFn4(searchList, searchWord, callback) {
            const result = searchList.filter(x => x.searchText.includes(searchWord));
            return result;
        },

    }
}

DataPicker Events

目前所有的 Events 都是在官方的 uni-data-picker(0.1.8)的基础上进行的添加，下边只标注新增的事件

无新增

基本用法

本地数据

<template>
  <view>
    <song-data-picker
      :localdata="items"
      popup-title="请选择班级"
      :openSearch="true"
      @change="onchange"
      @nodeclick="onnodeclick"
    ></song-data-picker>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          {
            text: '一年级',
            value: '1-0',
            children: [
              {
                text: '1.1班',
                value: '1-1',
              },
              {
                text: '1.2班',
                value: '1-2',
              },
            ],
          },
          {
            text: '二年级',
            value: '2-0',
          },
          {
            text: '三年级',
            value: '3-0',
          },
        ],
      };
    },
    methods: {
      onchange(e) {
        const value = e.detail.value;
      },
      onnodeclick(node) {},
    },
  };
</script>