更新记录

1.0.6（2023-02-08）

组件添加控制点击遮罩层是否关闭功能

1.0.5（2023-02-07）

1.4版本上传时有一个 console.log没有删除

1.0.4（2023-02-07）

代码进行了删除重构，解决了因数据量过大导致组件卡死的问题，提高了组件的流畅性

平台兼容性

参数说明

返回值说明

    treeConfirm(e) {
        console.log("你点击了确定")
        console.log(e)
        /**
         * e==>
         * [
         *   {id: "100", name: "测试100", value: "冗余值"}
         *   {id: "110", name: "测试110", value: "冗余值"}
         *   {id: "111", name: "测试111", value: "冗余值"}
         * ]
         * e为选中的数据数组
         * e中的对象中有id(idKey指定的字段值)、name(nameKey指定的字段)、value(allKey指定的字段)
         */
    },

代码使用示例

<template>
    <view>
        <button @click="showTree" type="primary" style="width: 50%; margin-top: 20px;">
            打开树形选择器
        </button>
        <peng-tree
                ref="pengTree"
                :range="range"
                idKey="id"
                nameKey="name"
                allKey="value"
                :multiple="false"
                :cascade="false"
                :selectParent="false"
                :foldAll="false"
                confirmColor="#007aff"
                cancelColor="#757575"
                title="标题"
                titleColor="#757575"
                @cancel="treeCancel"
                @confirm="treeConfirm"
        >
        </peng-tree>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                range: [{
                    id: "100",
                    name: "测试100",
                    value: "冗余值",
                    children: [{
                        id: "110",
                        name: "测试110",
                        value: "冗余值",
                        children: [{
                            id: "111",
                            name: "测试111",
                            value: "冗余值",
                        }]
                    }]
                },
                    {
                        id: "200",
                        name: "测试200",
                        value: "冗余值",
                        children: [{
                            id: "220",
                            name: "测试220",
                            value: "冗余值",
                            children: [{
                                id: "222",
                                name: "测试222",
                                value: "冗余值",
                            }]
                        }]
                    },
                    {
                        id: "300",
                        name: "测试300",
                        value: "冗余值"
                    }
                ]
            }
        },
        methods: {
            showTree() {
                //打开选择器
                this.$refs.pengTree._show();
                //关闭选择器
                //this.$refs.pengTree._hide();
            },
            treeCancel(e) {
                console.log("你点击了取消")
                console.log(e)
            },
            treeConfirm(e) {
                console.log("你点击了确定")
                console.log(e)
            },
        }
    }
</script>