---

1、效果展示

2、如何使用

2.1 插件市场

首先从插件市场中将插件导入到项目中

2.2 引入插件

在使用的页面引入插件

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

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

import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue"
export default {components: { baTreePicker},data() {return {listData: [{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: '研发部',}]}]}}methods: {// 显示选择器showPicker() {this.$refs.treePicker._show();},//监听选择（ids为数组）selectChange(ids, names) {console.log(ids, names)}
}

3、参数配置

3.1 属性

属性名	类型	默认值	说明
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	是否有分割线，默认无

3.2 方法

属性名	类型	默认值	说明
_show()			显示选择器
_hide()			隐藏选择器

4、遇见的问题

4.1、设置下拉树的样式

<style>.loginTree ::v-deep .item-label .uni-flex-item {display: flex !important;}.loginTree ::v-deep .item-label .uni-flex-item .item-name {line-height: 40px !important;}
</style>