更新记录

2.0.2（2024-06-18） 下载此版本

1. 修复自定义搜索未传值

2.0.1（2024-06-11） 下载此版本

1. 修复了默认值回显选中的逻辑；
2. placeholder和选中值展示分开。
3. 增加原有功能的slot自定义触发选择

2.0.0（2024-06-02） 下载此版本

1. 使用picker-view替代picker，设计实现重构，自定义顶部，增加搜索。
2. 新增filterable是否可搜索，顶部有搜索输入。
3. 新增filterMethod自定义过滤函数，目前内部的搜索仅支持一级过滤。

平台兼容性

uni-app

其他

ifun-tree-picker

树级结构数据选择组件。使用picker-view组件封装。

• 树级机构化数据，可自定义键值属性。
• 绑定默认值。
• 可清除。
• 可选择父级节点。
• 支持懒加载节点数据
• 支持搜索过滤

使用

通过uni_modules直接导入项目中。

<template>
    <view class="tree-select">
        <view class="component-item">
            <text  class="component-item-label">ifun-tree-picker</text>
            <view class="component-item-content">
                <ifun-tree-picker :data="treeData"></ifun-tree-picker>
            </view>

        </view>
    </view>
</template>

<script>
    export default {
        name:"tree-select",
        data() {
            return {
                treeData:[
                    {
                        value:'节点1',
                        label:'节点1',
                        children:[]
                    },
                    {
                        value:'节点2',
                        label:'节点2',
                        children:[
                            {
                                value:'节点21',
                                label:'节点21',
                            },
                            {
                                value:'节点22',
                                label:'节点22',
                                children:[
                                    {
                                        value:'节点221',
                                        label:'节点221',
                                    },
                                    {
                                        value:'节点222',
                                        label:'节点222',
                                    }
                                ]
                            }
                        ]
                    }
                ]
            };
        },
        methods:{

        }
    }
</script>

props 说明

lazy 说明

节点数据懒加载，对于关联数据不能组装到一起时的处理。

支持部分数据懒加载，仅当节点对象数据没有children或者为空时触发。这样也可以进行数据的缓存，避免重复请求，可以在懒加载后更新data的数据结构。

懒加载方法load,在:lazy="true"时生效，在节点选择变化时，触发调用，异步调用通过回调函数callback返回下一层级的节点数据。

注意：节点懒加载没有数据时，回调为空或者不调用。

value 说明

初始化默认值。保持picker打开和默认值选中一直，接受对象或者数组。

对象时和绑定的数据data结构保持一致，这种场景对于各个层级数据treeOptions.value都不相同时相对方便。

如果出现不同父级，但是子层级数据相同的情况，默人选中就只能使用数组了，数组的顺序按照层级顺序传入。

checkStrictly 说明

默认的选择当有children时，回默认选择子级的第一条数据，一直到节点没有子级。如果想要选到某一节点，则需要设置这个属性。

所有的下一级数据节点都会被填充空对象。在确认选择返回时，则只返回除这一层级外的其他层级数据。

treeOptions说明

事件

slot

默认slot - default. 自定义触发picker的内容。

默认的slot是text文本展示，可以展示当前确定选择的最后一列对象的值。如果自定义则需要自己监听事件ok处理文本展示