更新记录

1.5.1（2024-04-25）

feat:

1. 新增multiple属性设置，可以设置节点多选。

1.4.1（2023-06-15）

feat:

1. 增加开场动画；关闭动画

1.3.0（2023-05-24）

feat:

1. 增加checkStrictly控制选择叶子结点。

平台兼容性

ifun-tree-select

树级结构数据选择组件。

1. 适合多级树状结构数据；
2. 可多选。

使用

通过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 说明

multiple

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

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

checkStrictly 说明

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

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

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

事件