uniapp树形层级选择器

uniapp插件 - 树形层级选择器

简介

插件下载地址
uniapp树形层级选择器插件，使用的picker弹窗形式的，样式和比例参照uniapp的picker和uni-data-picker组件

• 支持单选、多选、父级选择
• 支持Object对象属性自定义映射
• 支持显示全部选中、部分选中、未选中三种状态
• 支持快速自定义简单样式（分割线、按钮、标题等），深入样式可复写css

截图展示

使用方法

在 script 中引入组件

	import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue"
	export default {
		components: {
			baTreePicker
		}
1
2
3
4
5

在 template 中使用组件

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

在 script 中定义打开方法，和选择监听

		methods: {
			// 显示选择器
			showPicker() {
				this.$refs.treePicker._show();
			},
			//监听选择（ids为数组）
			selectChange(ids, names) {
				console.log(ids, names)
			}
		}
1
2
3
4
5
6
7
8
9
10

在 template 中调用打开

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

属性

数据格式

注意：必须有id、name(id可通过valueKey来配置为其它键值，如value)字段，且唯一

[
    {
        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: '研发部',
            
        }]
    }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

方法