简介(下载地址)
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-Notify(文档)
应用未读角标插件 Ba-Shortcut-Badge (文档)
扫码原生插件(毫秒级、支持多码)Ba-Scanner-G(文档)
扫码原生插件 - 新(可任意自定义界面版本;支持连续扫码;支持设置扫码格式)Ba-Scanner(文档)
动态修改状态栏、导航栏背景色、字体颜色插件 Ba-AppBar(文档)
安卓保活插件(采用多种主流技术) Ba-KeepAlive(文档)
安卓快捷方式(桌面长按app图标) Ba-Shortcut(文档)
自定义图片水印(任意位置) Ba-Watermark(文档)
最接近微信的图片压缩插件 Ba-ImageCompressor(文档)
视频压缩、视频剪辑插件 Ba-VideoCompressor(文档)
动态切换应用图标、名称(如新年、国庆等) Ba-ChangeIcon(文档)
原生Toast弹窗提示(穿透所有界面、穿透原生;自定义颜色、图标 ) Ba-Toast(文档)
websocket原生服务(自动重连、心跳检测) Ba-Websocket(文档)
智能安装(自动升级) Ba-SmartUpgrade(文档)
监听通知栏消息(支持白名单、黑名单、过滤) Ba-NotifyListener(文档)
全局置灰、哀悼置灰(可动态、同时支持nvue、vue) Ba-Gray(文档)