更新记录

1.2（2022-07-28）

优化单选bug

1.1（2022-07-04）

优化

1.0（2022-06-30）

初次发布

平台兼容性

树形层级选择器 ba-tree-picker

简介

ba-tree-picker 是一款uniapp树形层级选择器插件，picker弹窗形式的，样式和比例参照uniapp的picker和uni-data-picker组件。

• 支持单选、多选、父级选择，当然也支持单层选择
• 支持Object对象属性自定义映射
• 支持显示全部选中、部分选中、未选中三种状态
• 支持快速自定义简单样式（分割线、按钮、标题、对齐等），深入样式可复写css

使用方法

在 script 中引入组件

    import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue"
    export default {
        components: {
            baTreePicker
        }

在 template 中使用组件

    <ba-tree-picker ref="treePicker" :multiple='false' @select-change="selectChange" title="选择城市"
        :localdata="listData" valueKey="value" textKey="label" childrenKey="children" />

在 script 中定义打开方法，和选择监听

        methods: {
            // 显示选择器
            showPicker() {
                this.$refs.treePicker._show();
            },
            //监听选择（ids为数组）
            selectChange(ids, names) {
                console.log(ids, names)
            }
        }

在 template 中调用打开

    <view @click="showPicker">调用选择器</view>

源码已提供，逻辑可自定义修改

比如，这版设计的是，如果子集都被选，只返父id，如果需要所有子集id都返回的逻辑，在源码中修改一下selectedList的相关逻辑就行（如下）

        _confirm() { //多选
            let selectedList = [];
            let selectedNames;
            this.treeList.forEach((item, index) => {
                if (item.checkStatus === 2) {
                    selectedList.push(item.id);
                    selectedNames = selectedNames ? selectedNames + ' / ' + item.name : item.name;
                }
            })
            this._hide()
            this.$emit("select-change", selectedList, selectedNames);
        },

如果需要只返回子集Id，如上修改后，再修改下判断，如下：

    if (item.checkStatus === 2 && item.isLastLevel)//判断条件改为

属性

数据格式

注意：必须有id、name(id可通过valueKey来配置为其它键值，如value)字段，且唯一

[
    {
        id: 1,
        name: '公司1',
        children: [{
            id: 11,
            name: '研发部',
            children: [{
                id: 111,
                name: '张三',

            },{
                id: 112,
                name: '李四',

            }]
        },{
            id: 12,
            name: '综合部',

        } ]
    },
    {
        id: 2,
        name: '公司2',
        children: [{
            id: 21,
            name: '研发部',

        },{
            id: 22,
            name: '综合部',

        },{
            id: 23,
            name: '财务部',

        }, ]
    },
    {
        id: 3,
        name: '公司3'
    },
    {
        id: 4,
        name: '公司4',
        children: [{
            id: 41,
            name: '研发部',

        }]
    }
]

方法

系列插件

图片选择插件 Ba-MediaPicker （文档）

图片编辑插件 Ba-ImageEditor （文档）

文件选择插件 Ba-FilePicker （文档）

应用消息通知插件（多种样式，新增支持常驻通知模式） Ba-Notify（文档）

应用未读角标插件 Ba-Shortcut-Badge （文档）

应用开机自启插件 Ba-Autoboot（文档）

扫码原生插件（毫秒级、支持多码）Ba-Scanner-G（文档）

扫码原生插件 - 新（可任意自定义界面版本；支持连续扫码；支持设置扫码格式）Ba-Scanner（文档）

动态修改状态栏、导航栏背景色、字体颜色插件 Ba-AppBar（文档）

原生sqlite本地数据库管理 Ba-Sqlite（文档）

安卓保活插件（采用多种主流技术） Ba-KeepAlive（文档）

安卓快捷方式（桌面长按app图标） Ba-Shortcut（文档）

自定义图片水印（任意位置） Ba-Watermark（文档）

最接近微信的图片压缩插件 Ba-ImageCompressor（文档）

视频压缩、视频剪辑插件 Ba-VideoCompressor（文档）

动态切换应用图标、名称（如新年、国庆等） Ba-ChangeIcon（文档）

原生Toast弹窗提示（穿透所有界面、穿透原生；自定义颜色、图标 ） Ba-Toast（文档）

图片涂鸦、画笔 Ba-ImagePaint（文档）

pdf阅读（手势缩放、显示页数） Ba-Pdf（文档）

声音提示、震动提示、语音播报 Ba-Beep（文档）

websocket原生服务（自动重连、心跳检测） Ba-Websocket（文档）

短信监听（验证码） Ba-Sms（文档）

智能安装（自动升级） Ba-SmartUpgrade（文档）

监听系统广播、自定义广播 Ba-Broadcast（文档）

监听通知栏消息（支持白名单、黑名单、过滤） Ba-NotifyListener（文档）

全局置灰、哀悼置灰（可动态、同时支持nvue、vue） Ba-Gray（文档）

获取设备唯一标识（OAID、AAID、IMEI等） Ba-IdCode（文档）

实时定位（系统、后台运行、支持息屏）插件 Ba-Location（文档）