hs_hzl_uniapp_ml/pageA/components/dictSelect.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="bindPickerChange" :value="index" :range="data" range-key="dictLabel"
						:disabled="disabled">
						<view class="pickerText" v-if="data && data.length>0 && index !== undefined">
							{{ data[index].dictLabel }}
						</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: '岗位'
			},
			dictKey: {
				Type: String,
				default: null
			},
			disabled: false,
		},
		data() {
			return {
				data: [],
				index: undefined
			}
		},
		watch: {
			value() {
				for (var i = 0; i < this.data.length; i++) {
					if (this.data[i].dictValue === this.value) {
						this.index = i
					}
				}
			}
		},
		mounted() {
			this.data = uni.getStorageSync(this.dictKey)
		},
		methods: {
			bindPickerChange: function(e) {
				this.index = e.detail.value
				this.$emit('input', this.data[this.index].dictValue)
			},
		}
	}
</script>

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

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

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