更新记录

4.0（2024-04-02）

1. 异步加载，支持分页
2. 支持单选，多选，纯展示
3. 支持搜索

平台兼容性

注意

插件市场的版本是一次性加载数据的，文档地址https://ext.dcloud.net.cn/plugin?id=2423

在线预览地址

地址： https://lusz.top/picture/treeload/

获取异步版本请联系我wx: 122720267

功能介绍

1.支持异步加载、分页加载、搜索 2.支持单选（所有可选、只选子级俩种模式） 3.多选（不支持关联选择） 4.支持纯展示

参数说明

props参数书说明

getDataApi方法说明

需返回一个Promise，并且值字段包括data、has_more，data是当前页的列表数据，has_more是是否已加载完成

    getDataApi(data, middleware) {
        return new Promise((resolve) => {
            $api({
                url: '/treeV2/get',
                data
            }).then(res => {
                let {
                    data: arr,
                    per_page,
                    current_page,
                    total
                } = res.data
                resolve({
                    data: arr,
                    has_more: per_page * current_page < total
                })
            })
        })
    },

接口数据格式要求

其中name和id可配置，user固定传，user为false时说明没有下级，为true是存在下级

    [
        {
            name: '一级',
            id: '1',
            user:true
        }
    ]

使用说明（弹窗模式）：

1. 在页面引用组件，并注册

import treeSingleChoice from '../../components/tree-signle-choice/index.vue'

添加组件使用

    <uniPopup background-color="#fff" ref="popup" type="bottom">
        <view class="center">
            选择用户
        </view>
        <view>
            <treeSingleChoice scrollHeight="60vh" @onConfirm="onConfirm" :getDataApi="getDataApi"
                :value="selectListItem" :show_search="true" :prop="props"></treeSingleChoice>
        </view>
    </uniPopup>

获取选中的值

    let value = this.$refs.tree.checkValue

将继续持续维护和开发

该插件为付费插件，付费50元获取，需要请联系我微信: 122720267