medical/conponents/Sever/Sever.vue

<template>
	<view>
		<view class="choice-left" @click="pickerShow">{{confirmData}} <u-icon name="arrow-down" style="margin-left: 17rpx;"></u-icon></view>
		<u-picker 
			:show="show" 
			ref="uPicker" 
			:columns="columns" 
			@confirm="confirm" 
			keyName="label" 
			@close="cancel" 
			@change="changeHandler" 
			:closeOnClickOverlay="true" 
			@cancel="cancel"
			:defaultIndex = '[0]'
		></u-picker>
	</view>
</template>

<script>
	export default {
		props: {
			classData: {
				type: Array,
				default: ['1'],
			}
		},
		data() {
			return {
				show: false, // 控制全校多联选择器显隐
				confirmData: '全校', // 选中
				// columns: [
				//     ['全校', '小学', '初中'],
				// ],
				columns: [],
			}
		},
		created(){
			this.classData[0].label = '全校'
			this.columns.push(this.classData)
			console.log(this.columns)
		},
		methods: {
			pickerShow(){
				this.show = true
				// this.$refs.uPicker.setColumnValues(0, this.classData)
				this.$refs.uPicker.setColumnValues(1, [])
				this.$refs.uPicker.setColumnValues(2, [])
			},
			confirm(e) {
				if(e.indexs[0] == 0){
					// this.confirmData = e.value[0].label
					this.confirmData = '全校'
					var data = e.value[0].id
					this.$emit('search', '')
				}else{
					this.confirmData = e.value[e.value.length -1].label
					var data = e.value[e.value.length -1].id
					this.$emit('search', data)
				}
				console.log('confirm', data)
			    this.show = false
			},
			
			changeHandler(e) {
			    const {
			        columnIndex,
			        value,
			        values, // values为当前变化列的数组内容
			        index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
			        picker = this.$refs.uPicker
			    } = e
			    // 当第一列值发生变化时，变化第二列(后一列)对应的选项
			    if (columnIndex === 0) {
			        // picker为选择器this实例，变化第二列对应的选项
					if(index == 0){
						console.log('w')
						picker.setColumnValues(1, [])
						picker.setColumnValues(2, [])
						return
					}
			        picker.setColumnValues(1, this.classData[index].children)
					picker.setColumnValues(2, this.classData[index].children[0].children)
			    }
				if (columnIndex === 1) {
				    // picker为选择器this实例，变化第二列对应的选项
					console.log('value', e, 'index', index)
					picker.setColumnValues(2, value[0].children[index].children)
				}
			
			},
			
			// 关闭
			cancel(){
				this.show = false
			},
			
		},
	}
</script>

<style lang="scss" scoped>
	.choice-left{
		float: left;
		overflow: hidden;
		display: flex;
		width: 250rpx;
	}
</style>