school-shunt-app/components/u-picker/u-picker.vue

<template>
	<picker @change="change" range-key="pickerName" :value="selectedItem.valueIndex" :range="sourceOptions">
		<slot :data="selectedItem"/>
	</picker>
</template>

<script>
	export default {
		model: {
			prop: 'value',
			event: 'changeValue'
		},
		props: {
			value: {
				type: [Number, String],
				default: ''
			},
			options: {
				type: Array,
				default: () => {
					return []
				}
			},
			valueKey: {
				type: String,
				default: 'value'
			},
			labelKey: {
				type: String,
				default: 'label'
			},
		},
		computed: {
			sourceOptions(){
				const list = this.options.map(item=>{
					const pickerName = item.disabled===true? item[this.labelKey] + '（已选）' : item[this.labelKey]
				return {...item, pickerName}
				})
				// const list = this.options.filter(item=>item.disabled!==true)
				return list
			},
			selectedItem() {
				const valueIndex = this.options.findIndex(element => element[this.valueKey] == this.value)
				const item = valueIndex>=0 ? this.options[valueIndex] : {}
				item.valueIndex = valueIndex
				return item
			}
		},
		methods: {
			change(e) {
				const index = e.detail.value
				const item = this.options[index]
				this.$emit('changeValue', item[this.valueKey])
				const that = this
				setTimeout(function() {
					that.$emit('change', that.selectedItem[that.valueKey], that.selectedItem)
				}, 10);
			}
		}
	}
</script>

<style>

</style>