uniapp开发小程序—picker结合后台数据实现二级联动的选择

一、效果图

二、完整代码

<template>
	<view>
		<picker mode="multiSelector" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange"
			:value="multiIndex" :range="multiArray">
			<view class="picker">
				{{multiArray[0][multiIndex[0]]}} > {{multiArray[1][multiIndex[1]]}}
			</view>
		</picker>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				multiArray: [],
				multiIndex: [0, 0],
				//数据格式
				array: [{
						id: 0,
						name: '大类1',
						children: [{
							id: 10,
							name: '小类1'
						},{
							id: 11,
							name: '小类11'
						}
						]
					},
					{
						id: 1,
						name: '大类2',
						children: [{
							id: 20,
							name: '小类2'
						}]
					}
				],
				oneId: 0,
				twoId: 0,
			}
		},
		onLoad() {
			this.getType()
			setTimeout(() => {
				this.initData();
			}, 1000)
		},
		methods: {
			initData() {
				console.log('111', this.array);
				//首次加载渲染第一列和第二列数据
				const arrOne = this.array.map(item => {
					return item.name; // 此方法将第一列’名称'分到一个新数组中
				});
				const arrTwo = this.array[0].children.map(item => {
					return item.name; // 此方法将第二列’名称'分到一个新数组中
				});
				this.multiArray[0] = arrOne;
				this.multiArray[1] = arrTwo;
				this.oneId = this.array[0].id;
				this.twoId = this.array[0].children[0].id;
			},

			//滚动时候触发，
			bindMultiPickerColumnChange(e) {
				console.log(e.detail.column, "e.detail.column表示是第几列表示是第几列")
				if (e.detail.column === 0) {
					this.initSelect(e.detail.value);
					this.multiIndex[0] = e.detail.value;
				} else if (e.detail.column === 1) {
					this.multiIndex[1] = e.detail.value;
					console.log('detailvalue', e.detail.value);
					this.twoId = this.array[this.multiIndex[0]].children[this.multiIndex[1]].id;
				}
				console.log(this.oneId, "打印第一列id");
				console.log(this.twoId, "打印第二列id");
			},

			//定义一个传入对应的’下标'为了拿到第一列id 和第二列的name和id的方法
			initSelect(index) {
				this.oneId = this.array[index].id; //拿到第一列id
				this.multiIndex[1] = 0; //将右边的数组的下标变回第一个显示
				this.$set(this.multiArray, 1, []); //清空对应右边数组的数据
				if (this.array[index].children.length == 0) {
					console.log("如果右边长度等于0,那么清掉右边ID");
					this.twoId = "";
				} else {
					const arrTwo = this.array[index].children.map(item => {
						return item.name; //将第一列的children的数组遍历name返回到一个新数组接收
					});
					this.$set(this.multiArray, 1, arrTwo); //重新赋值到新的数组里
					this.twoId = this.array[index].children[0].id; //升那么对SB一八en  t
				}
			},

			//点击确定时触发,这里点击处理自己的业务,应该就是拿到两个个id去请求
			bindMultiPickerChange(e) {
				console.log(this.oneId);
				console.log(this.twoId);
			},


			getType() { //清场
				uni.request({
					url: 'https://xxxxxxxx/station/getTypeGoods',
					success: (res) => {
						console.log(res.data);

						//后台返回的是两个数组，一个数组是大分类，一个小分类
						//将两个数组生成树结构 赋值给array
						this.array = res.data.types.map((item, index) => {
							return {
								...item,
								children: res.data.goods[index]
							}
						})
						console.log('array', this.array);
						//后台返回数据格式
						//types:[{id:x,name:'xx'},{},{}...]
						//goods:[[{id:x,name:'x'},{},{}...],[],[],...]
					}
				})
			},
		}
	}
</script>

<style>
	.uni-picker-tips {
		font-size: 12px;
		color: #666;
		margin-bottom: 15px;
		padding: 0 15px;
		/* text-align: right; */
	}
</style>


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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139