hs_hzl_uniapp_ml/pageApp/components/postSelect.vue

<template>
	<view class="desc">
		<uni-row>
			<uni-col :span="5">
				<view class="desc" style="font-size: 25rpx;">
					{{label}}
				</view>
			</uni-col>
			<uni-col :span="19">
				<view class="pickerView">
					<picker @change="postBindPickerChange" :value="post.index" :range="post.data" range-key="postName">
						<view class="pickerText" v-if="post.data && post.data.length>0 && post.index !== undefined">
							{{ post.data[post.index].postName }}
						</view>
						<view class="pickerText" v-else>
							待 选 择
						</view>
					</picker>
				</view>
			</uni-col>
		</uni-row>
	</view>
</template>

<script>
	export default {
		name: 'hs-post-select',
		props: {
			value: {
				Type: String,
				default: null
			},
			label: {
				Type: String,
				default: '岗位'
			}
		},
		data() {
			return {
				post: {
					data: uni.getStorageSync('postsData'),
					index: undefined
				}
			}
		},
		onLoad() {

		},
		methods: {
			postBindPickerChange: function(e) {
				this.post.index = e.detail.value
				this.$emit('input', this.post.data[this.post.index].postId)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.desc {
		padding: 10rpx 5rpx 0 15rpx;
		color: #818181;
		font-size: 20rpx;
	}

	.pickerView {
		// align-items: flex-end;
		padding: 10rpx 20rpx;
		border: 1rpx #eeeeee solid;
	}

	.pickerText {
		font-size: 26rpx;
		color: #b1b1b1;
	}
</style>