uni-app级联选择器

<template>
	<view class="cascade-select">
		<view class="cascade-select-item" v-for="(item, index) in selectedItems" :key="index"
			@click="handleItemClick(index)">
			{{ item[label] }}
			<span v-if="index !== selectedItems.length - 1">></span>
		</view>
		<view class="cascade-select-item cascade-select-placeholder" v-if="!selectedItems.length"
			@click="handleItemClick(0)">
			{{ placeholder }}<text v-if="placeholder=='标准品'" class="blk blk-yousanjiao"></text>
		</view>
		<view class="cascade-select-dropdown" v-if="isDropdownVisible">
			<view class="cascade-select-dropdown-item" v-for="(item, index) in currentOptions" :key="index"
				@click="handleOptionClick(item)">
				{{ item[label] }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			options: {
				type: Array,
				required: true
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			label:{
				type:String,
				default:'label',
			},
			value:{
				type:String,
				default:'value',
			},
			children:{
				type:String,
				value:'children'
			},
			show:{
				type:Boolean,
				value:true,
			},
		},
		data() {
			return {
				selectedItems: [], //目前选中的样式------
				currentOptions: this.options, //
				isDropdownVisible: false, //是否显示下拉框
			}
		},
		methods: {
			handleItemClick(index) {
				let temp_item = this.selectedItems[index];
				console.log("temp_item--->",temp_item);
				this.selectedItems.splice(index, this.selectedItems.length - index);
				this.currentOptions = this.options;
				for (let i = 0; i < index; i++) {
					let temp = this.currentOptions[this.selectedItems[i][this.value]]&&this.currentOptions[this.selectedItems[i][this.value]][this.children];
					if(temp){
						this.currentOptions = temp;
					}else{
						let temp_item_1 = this.selectedItems[index-1];
						console.log("temp_item_-1--->",temp_item_1[this.children]);
						this.currentOptions = temp_item_1[this.children];
					}
				}
				this.isDropdownVisible = true;
				this.$emit('changeShow',true);
			},
			handleOptionClick(item) {
				console.log("item-----:", item);
				this.selectedItems.push(item);
				this.currentOptions = item[this.children];
				console.log("this.currentOptions--->", this.currentOptions, "this.selectedItems---->", this.selectedItems);
				this.isDropdownVisible = true;
				this.$emit('changeShow',true);
				console.log("this.value--",this.value);
				this.$emit('change', this.selectedItems.map(item => item[this.value]));
			}
		},
		watch:{
			show(val){
				console.log("变化了---->",val);
				this.isDropdownVisible = val;
			}
		},
	}
</script>

<style scoped>
	.cascade-select {
		display: flex;
		align-items: center;
		height: 30px;
		border-radius: 4px;
		padding: 0 10px;
		cursor: pointer;
		/* border: 1px solid #ccc; */
	}

	.cascade-select-item {
		display: flex;
		align-items: center;
		height: 100%;
		font-size: 14px;
		color: #333;
	}

	.cascade-select-item:not(:last-child) {
		margin-right: 5px;
	}

	.cascade-select-item:hover {
		/* background-color: #f5f5f5; */
	}

	.cascade-select-item>span {
		margin: 0 5px;
	}

	.cascade-select-placeholder {
		color: #999;
	}

	.cascade-select-dropdown {
		position: absolute;
		top: 40px;
		left: 10px;
		z-index: 999;
		/* width: 100%; */
		max-height: 200px;
		overflow-y: auto;
		background-color: #fff;
		border: 1px solid #ccc;
		border-top: none;
		border-radius: 0 0 4px 4px;
		box-shadow: 0rpx 0rpx 12rpx 9rpx #d4d4d4;
	}

	.cascade-select-dropdown-item {
		height: 30px;
		line-height: 30px;
		padding: 0 10px;
		font-size: 14px;
		color: #333;
		cursor: pointer;
	}

	.cascade-select-dropdown-item:hover {
		/* background-color: #f5f5f5; */
	}
</style>

使用方法