uniapp 树形层级选择器插件 ba-tree-picker

简介（下载地址）

ba-tree-picker 是一款 树形层级选择器插件，使用的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)//判断条件改为

属性

属性名	类型	默认值	说明
localdata	Array	[]	源数据，目前支持tree结构，后续会考虑支持扁平化结构
valueKey	String	id	指定 Object 中 key 的值作为节点数据id
textKey	String	name	指定 Object 中 key 的值作为节点显示内容
childrenKey	String	children	指定 Object 中 key 的值作为节点子集
multiple	Boolean	false	是否多选，默认单选
selectParent	Boolean	true	是否可以选父级，默认可以
title	String		标题
titleColor	String		标题颜色
confirmColor	String	#0055ff	确定按钮颜色
cancelColor	String	#757575	取消按钮颜色
switchColor	String	#666	节点切换图标颜色
border	Boolean	false	是否有分割线，默认无

数据格式

注意：必须有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: '研发部',
            
        }]
    }
]

方法

方法名	参数	默认值	说明
_show()			显示选择器
_hide()			隐藏选择器

系列插件

图片选择插件 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（文档）