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

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 属性

3.2 方法

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>