在uniapp表单项目中，涉及到选择的地方，我们经常需要进行选择，这就需要请求接口，获取数据，对照数据等等操作，当一个表单里只有一个选择项目，在编写的时候，可以直接将逻辑代码放在一块，但是当一个表单里有很多选项，将所有的选择都放在就会很麻烦，很容易出错，而且不易维护，这就需要将选项封装到组件中了。以前的经验，还需要子组件选择后，将值抛给父组件，由父组件更新，最近又学到了sync，可以直接在子组件里进行更新，这样又节省了一个步骤，只需要父组件将值给子组件剩下的只需要子组件完成我们的需求就可以了。干净快捷。

/**
* @Author: 858834013@qq.com
* @Name: BasicUnit
* @Date: 2022-01-18
* @Desc: 计量单位
*/
<template>
	<div>
		<div @click="getshow">
			<div class="userInfo1">
				<div class="userInfoName">
					<text>单位</text><text class="red">*</text>
				</div>
				<div class="bodys">
					<input :value="value" disabled="" type="text" placeholder="请选择"
						placeholder-style="font-size:32rpx;color: #D5D5E0;" />
					<image src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/static/icon_right.png"
						mode="widthFix"></image>
				</div>
			</div>
		</div>
		<u-picker :title="title" :show="show" @cancel="show=false" @confirm="getConfirm" :columns="list"></u-picker>
	</div>
</template>

<script>
	import {
		CommandGetDicListByType
	} from '@/config/api.js'
	export default {
		name: 'CommodityType',
		props: {
			value: {
				type: '',
				default () {
					return {}
				}
			},
			code: {
				type: String,
				default () {
					return ''
				}
			},
		},
		data() {
			return {
				show: false,
				BelongId: '',
				datalist: [],
				list: [
					[]
				]
			};
		},
		mounted() {
			this.BelongId = JSON.parse(uni.getStorageSync('userData')).BelongId
			this.getdata()
		},
		methods: {
			getshow() {
				this.show = true
			},
			getConfirm(e) {
				var that = this;
				that.$emit("update:value", that.datalist[e.indexs[0]].KeyName);
				that.$emit("update:code", that.datalist[e.indexs[0]].KeyCode);
				this.show = false
			},
			getdata() {
				var that = this;
				that.list[0] = [];
				that.datalist = []
				CommandGetDicListByType({
					params: {
						BeLongId: that.BelongId,
						DType: 'BasicUnit',
					},
					custom: {
						auth: true
					}
				}).then(res => {
					if (res.Code == 200) {
						that.datalist = res.Data
						that.datalist.forEach((type) => {
							that.list[0].push(type.KeyName)
						});
					}
				}).catch(err => {

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userInfo1 {
		width: 630rpx;
		min-height: 157rpx;
		background: rgba(216, 216, 216, 0);
		box-shadow: 0px 1rpx 0px 0px #F2F2F2;
		margin: 0 auto;

		.bodys {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;

			image {
				width: 32rpx;
			}
		}

		.userInfoName {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
			padding-top: 32rpx;

			text {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #151852;
			}

			.red {
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FF5252;
				margin-top: -15rpx;
			}

		}

		.userInfoName2 {
			text {
				color: #BABBCB;
			}

			.red {
				color: #FFD0CF;
			}
		}

		input {
			margin-top: 8rpx;
			color: #474A77;
			font-size: 32rpx;
			z-index: 1;
			position: relative;
		}

		.disabled {
			color: #C8C8D6;
		}
	}
</style>

<BasicUnit :value.sync="data.BasicUnit" :code.sync="data.UnitCode"></BasicUnit>