Uniapp: 下拉选择框 ba-tree-picker

---

1、效果展示

2、怎样使用

2.1 插件市场

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

2.2 引入插件

在使用的页面引入插件

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

复制代码

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

复制代码

1. import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue"
2. export default {
3.    components: { baTreePicker},
4.    data() {
5.         return {
6.                 listData: [
7.         {
8.           id: 1,
9.           name: '公司1',
10.           children: [{
11.             id: 11,
12.             name: '研发部',
13.             children: [{
14.               id: 111,
15.               name: '张三',
17.             }, {
18.               id: 112,
19.               name: '李四',
21.             }]
22.           }, {
23.             id: 12,
24.             name: '综合部',
26.           }]
27.         },
28.         {
29.           id: 2,
30.           name: '公司2',
31.           children: [{
32.             id: 21,
33.             name: '研发部',
35.           }, {
36.             id: 22,
37.             name: '综合部',
39.           }, {
40.             id: 23,
41.             name: '财务部',
43.           },]
44.         },
45.         {
46.           id: 3,
47.           name: '公司3'
48.         },
49.         {
50.           id: 4,
51.           name: '公司4',
52.           children: [{
53.             id: 41,
54.             name: '研发部',
56.           }]
57.         }
58.       ]
59.         }
60.    }
61.    methods: {
62.     // 显示选择器
63.     showPicker() {
64.         this.$refs.treePicker._show();
65.     },
66.     //监听选择（ids为数组）
67.     selectChange(ids, names) {
68.         console.log(ids, names)
69.     }
70. }

复制代码

3、参数配置

3.1 属性

属性名范例默认值分析localdataArray[]源数据，目前支持tree布局，后续会考虑支持扁平化布局valueKeyStringid指定 Object 中 key 的值作为节点数据idtextKeyStringname指定 Object 中 key 的值作为节点显示内容childrenKeyStringchildren指定 Object 中 key 的值作为节点子集multipleBooleanfalse是否多选，默认单选selectParentBooleantrue是否可以选父级，默承认以titleString标题titleColorString标题颜色confirmColorString#0055ff确定按钮颜色cancelColorString#757575取消按钮颜色switchColorString#666节点切换图标颜色borderBooleanfalse是否有分割线，默认无 3.2 方法

属性名范例默认值分析_show()显示选择器_hide()隐藏选择器 4、遇见的问题

4.1、设置下拉树的样式

1. <style>
2.         .loginTree ::v-deep .item-label .uni-flex-item {
3.                 display: flex !important;
4.         }
5.         .loginTree ::v-deep .item-label .uni-flex-item .item-name {
6.                 line-height: 40px !important;
7.         }
8. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。