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

发布于:2025-04-16 ⋅ 阅读:(31) ⋅ 点赞:(0)


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>

网站公告

今日签到

点亮在社区的每一天
去签到