uniapp 微信小程序开发中，需要实现二级菜单筛选。为了避免很多组件放在一块导致数据混乱维护困难，这里将下拉菜单单独封装，只将选中的值返回给父组件，其他的数据交互全部在当前组件内完成。

需求

项目中有一个菜单需要下拉选择，这里的下拉有一级的，也有二级的，只有一级的就选择一级，有二级的就选择二级的。

数据处理

因为是一级二级混合在一块的，所以在选择只有一级的时候，也会返回两组数据，这时候我们需要处理一下，当数据为undefined就过滤掉，然后通过数组中最后一条数据去查询对应的id,返回给父组件。

getConfirm(e) {
	var that = this;
	console.log(e)
	var list = e.value
	var list2 = []
	list.forEach((type) => {
		if (type && type != 'undefined') {
			list2.push(type)
		}
	});
	var KeyCode = ''
	that.datalist.forEach((type) => {
		if (type.KeyName == list2[list2.length - 1]) {
			console.log(type)
			console.log(type.KeyCode)
			KeyCode = type.KeyCode
		}
	});
	that.$emit("update:value", KeyCode);
	// that.$emit("update:code", that.datalist[e.indexs[0]].KeyCode);
	this.show = false
},

/**
* @Author: 858834013@qq.com
* @Name: SettlementMethod
* @Date: 2023年06月01日10:27:14
* @Desc: 客户分类二级筛选
*/
<template>
	<div>
		<div @click="getshow">
			<div class="userInfo1">
				<div class="userInfoName">
					<text>客户分类</text>
				</div>
				<div class="bodys">
					<input :value="name" disabled="" type="text" placeholder="请选择"
						placeholder-style="font-size:32rpx;color: #D5D5E0;" />
					<image src="http://easyweigh.com.cn:8082/buildingMaterialsCloud/static/icon_right.png"
						mode="widthFix"></image>
				</div>
			</div>
		</div>
		<u-picker :title="title" ref="uPicker" :show="show" @cancel="show=false" @change="changeHandler"
			@confirm="getConfirm" :columns="list"></u-picker>
	</div>
</template>

<script>
	import {
		CommandGetDicListByType
	} from '@/config/api.js'
	import {
		forEach
	} from 'lodash';
	export default {
		name: 'CommodityType',
		props: {
			value: {
				type: '',
				default () {
					return {}
				}
			},
			code: {
				type: String,
				default () {
					return ''
				}
			},
		},
		data() {
			return {
				show: false,
				BelongId: '',
				datalist: [],
				columnData: [],
				list: [
					[]
				]
			};
		},
		mounted() {
			this.BelongId = JSON.parse(uni.getStorageSync('userData')).BelongId
			this.getdata()
		},
		computed: {
			name: function() {
				var name = ''
				this.datalist.forEach((type) => {
					if (this.value == type.KeyCode) {
						name = type.KeyName
					}
				});
				return name
			}
		},
		methods: {
			getshow() {
				this.show = true
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			getConfirm(e) {
				var that = this;
				console.log(e)
				var list = e.value
				var list2 = []
				list.forEach((type) => {
					if (type && type != 'undefined') {
						list2.push(type)
					}
				});
				console.log(list2)
				var KeyCode = ''
				that.datalist.forEach((type) => {
					if (type.KeyName == list2[list2.length - 1]) {
						console.log(type)
						console.log(type.KeyCode)
						KeyCode = type.KeyCode
					}
				});
				console.log(KeyCode)
				that.$emit("update:value", KeyCode);
				// that.$emit("update:code", that.datalist[e.indexs[0]].KeyCode);
				this.show = false
			},
			getName(e) {
				var that = this;
				var name = ''
				console.log(that.datalist)
				that.datalist.forEach((type) => {
					console.log(e)
					console.log(type)
					if (type.KeyCode == e) {
						console.log(type)
						name = type.KeyName
					}
				});
				console.log(name)
				return name
			},
			getdata() {
				var that = this;
				that.list[0] = [];
				that.columnData = [];
				that.datalist = []
				CommandGetDicListByType({
					params: {
						BeLongId: that.BelongId,
						DType: 'CustomerType',
					},
					custom: {
						auth: true
					}
				}).then(res => {
					if (res.Code == 200) {
						that.datalist = res.Data
						// 一级菜单处理
						that.datalist.forEach((type) => {
							if (!type.ParentCode) {
								that.list[0].push(type.KeyName)
								that.columnData.push([])
							}
						});
						// 二级菜单处理
						that.datalist.forEach((type) => {
							if (type.ParentCode) {
								that.list[0].forEach((type2, index) => {
									if (type2 == that.getName(type.ParentCode)) {
										that.columnData[index].push(type.KeyName)
									}
								});
							}
						})
						that.list[1] = that.columnData[0]
					}
				}).catch(err => {

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userInfo1 {
		width: 630rpx;
		min-height: 157rpx;
		background: rgba(216, 216, 216, 0);
		box-shadow: 0px 1rpx 0px 0px #F2F2F2;
		margin: 0 auto;

		.bodys {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;

			image {
				width: 32rpx;
			}
		}

		.userInfoName {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
			padding-top: 32rpx;

			text {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #151852;
			}

			.red {
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FF5252;
				margin-top: -15rpx;
			}

		}

		.userInfoName2 {
			text {
				color: #BABBCB;
			}

			.red {
				color: #FFD0CF;
			}
		}

		input {
			margin-top: 8rpx;
			color: #474A77;
			font-size: 32rpx;
			z-index: 1;
			position: relative;
		}

		.disabled {
			color: #C8C8D6;
		}
	}
</style>