更新记录

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

1. 修复自定义搜索未传值的问题。

1.9.0（2024-06-06） 下载此版本

1. 多选时增加全选操作，层级之间不关联

1.8.0（2024-06-03） 下载此版本

1. 新增filterable可搜索当前层级数据；
2. 新增filterMethod自定义过滤函数；

平台兼容性

ifun-tree-select

树级结构数据选择组件。这个组件需要自己去写触发逻辑，通过传入visible打开选择。

1. 适合多级树状结构数据；
2. 可多选。
3. 支持懒加载
4. 支持搜索，自定义搜索方法；

使用

通过uni_modules直接导入项目中。

<template>
    <view class="tree-select">
        <view class="component-item">
            <text  class="component-item-label">ifun-data-select</text>
            <view class="component-item-content" @click="()=>treeSelectShow=true">
                <text class="value">{{treeSelectInfo.label||'请选择'}}</text>
                <uni-icons type="bottom"></uni-icons>
            </view>

            <ifun-tree-select clearable @ok="handleTreeDataPicker" :visible.sync="treeSelectShow" :data="treeData" title="树级选择" ></ifun-tree-select>
        </view>
    </view>
</template>

<script>
    export default {
        name:"tree-select",
        data() {
            return {
                treeSelectShow:false,
                treeSelectInfo:{},
                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:{
            handleTreeDataPicker(info,arr){
                console.log(info,arr)
                this.treeSelectInfo = info
            }
        }
    }
</script>

props 说明

lazy

支持远程加载数据，设置为lazy=true,定义回调load,

<ifun-tree-select :load="getData" />

const getData=(node)=>{
    return new Promise((resolve,reject)=>{
        // 请求
        resolve(res.data);
    });
}

multiple

节点可多选，使用checkbox选择。最终返回结果为所有已选择节点组成的数组，ok事件第三个参数为空。

当与checkStrictly 属性配合时，多选择的checkbox只在叶子结点存在。

checkStrictly 说明

是否严格遵循父子节点不关联

默认的节点当有children时，是不会默认选择子级的第一条数据。

如果需要必须选择到节点的最后一级叶子结点，则需要设置为false

事件