---

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>