更新记录

1.0.0（2025-06-03） 下载此版本

首次发布

平台兼容性

uni-app(4.01)

其他

基础参数

事件回调

返回值说明

treeConfirm(e) {
    console.log("你点击了确定");
    console.log(e);
    /**
     * e 结构示例：
     * [
     *   { id: "100", name: "测试100", value: "冗余值" },
     *   { id: "110", name: "测试110", value: "冗余值" },
     *   { id: "111", name: "测试111", value: "冗余值" }
     * ]
     * - 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"
            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>