uni-app (uview)复选框demo

550 阅读1分钟

选择复选框后 新增-其他选项或输入框

<u-col span='12'>
						<u-form-item label="既往病史" prop="jwbs">
							<view>
								<u-checkbox-group
									v-model="formData.jwbs" placement="row"  
									@change="jwbsChanged">
									<template v-for="(item, index) in jwbsDictList">
										<u-checkbox
											:customStyle="{marginBottom: '8rpx',marginRight: '10rpx'}"
											:label="item.qc"
											:name="item.bm">
										</u-checkbox>
										<view v-show="qtfbjbStatus">
											<view
												class="contents-div"
												v-if="item.bm === '05'">
												<u-checkbox
													:customStyle="{marginBottom: '8rpx',marginRight: '10rpx'}"
													label="慢性阻塞性肺部疾病"
													name="051">
												</u-checkbox>
												<u-checkbox
													:customStyle="{marginBottom: '8rpx',marginRight: '10rpx'}"
													label="慢性肺部疾病其他"
													name="059">
												</u-checkbox>
												<u-form-item label="" class='contents-div-input'>
													<u--input v-model="otherInputBox.fbbsQt"
													size="mini"
													class="big-input"
													:disabled="fbbsQtStatus"
													:maxLength="25"
													:class="formData.fbbsQt ? 'fbbsQt' : ''"
													></u--input>
												</u-form-item>
											</view>
										</view>
										<view v-show="qtzlsStatus">
											<view
												class="contents-div"
												v-if="item.bm === '06'">
												<u-checkbox
													:customStyle="{marginBottom: '8rpx',marginRight: '10rpx'}"
													label="肺癌"
													name="061">
												</u-checkbox>
												<u-checkbox
													:customStyle="{marginBottom: '8rpx',marginRight: '10rpx'}"
													label="肿瘤其他"
													name="069">
												</u-checkbox>
												<u-form-item label="" class='contents-div-input'>
													<u--input  
													v-model="otherInputBox.zlsQt"
													size="mini"
													class="big-input"
													:disabled="zlsQtStatus"
													:maxLength="25"
													:class="formData.fbbsQt ? 'fbbsQt' : ''"></u--input>
												</u-form-item>
											</view>
										</view>
										<view v-show="qtjwbsStatus">
											<view
												class="contents-div"
												v-if="item.bm === '99'">
												<u-form-item label="" class='contents-div-input'>
													<u--input  
													v-model="otherInputBox.jwbsQt"
													size="mini"
													class="big-input"
													:maxLength="25"
													:class="formData.jwbsQt? 'jwbsQt' : ''"></u--input>
												</u-form-item>
											</view>
										</view>
									</template>
								</u-checkbox-group>
							</view>
						</u-form-item>
					</u-col>