避坑指南：Element UI 中 失误，你中招没？

项目场景：

提示：这里简述项目相关背景：
el-row 与 el-form 配合使用时一定要有完整的嵌套关系否则样式不生效
element-plus Input Number 数字输入框 固定宽

---

问题描述

提示：这里描述项目中遇到的问题：
有一次我在编写代码时，想先写几个el-row col 看看效果 怎么也不生效

<el-form ref="ruleFormRef" :rules="rules" :model="state.paramsadd" size="default">
					<el-row :gutter="20">
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="处方">
								<el-select v-model="state.paramsadd.PRESNO" placeholder="请选择" @change="cfchange" clearable>
									<el-option v-for="item in state.options1" :key="item" :label="item" :value="item" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="频次" prop="FREQUENCY">
							<el-select v-model="state.paramsadd.FREQUENCY" filterable placeholder="频次">
								<el-option v-for="item in state.options2" :key="item.CODE" :label="item.NAME" :value="item.CODE" />
							</el-select>
						</el-form-item>
						</el-col>


						<el-form-item label="日剂量" prop="DAILYDOSE">
							<el-input-number :min="1" :controls="false" v-model="state.paramsadd.DAILYDOSE" placeholder="日剂量" />
						</el-form-item>
						<el-form-item label="用法" prop="GIVEWAY">
							<el-select v-model="state.paramsadd.GIVEWAY" filterable placeholder="用法">
								<el-option v-for="item in state.options3" :key="item.CODE" :label="item.NAME" :value="item.CODE" />
							</el-select>
						</el-form-item>

---

原因分析：

提示：这里填写问题的分析：

el-row没有完整正确的嵌套el-form ，困扰我好久，我对比其他表单布局才发现这个问题

---

解决方案：

提示：要有完整嵌套

<el-form ref="menuDialogFormRef" :model="state.ruleForm" size="default" label-width="90px" :rules="state.rules">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="系统模块" prop="MODULECODE">
							<el-select v-model="state.ruleForm.MODULECODE" size="default" clearable placeholder="请选择" class="w100">
								<el-option v-for="item in props.optionsModule" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="菜单级次" prop="LEVELNO">
							<el-select v-model="state.ruleForm.LEVELNO" placeholder="菜单级次" class="w100" @change="handleC">
								<el-option label="一级菜单" :value="1" />
								<el-option label="二级菜单" :value="2" />
								<el-option label="三级菜单" :value="3" />
								<el-option label="四级菜单" :value="4" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="上级菜单" :prop="!state.isDisabled ? 'PARENTID' : ' '" :required="!state.isDisabled">
							<el-cascader v-model="state.ruleForm.PARENTID" props.checkStrictly="true" :options="state.menuData"
								@change="changeCascader" :show-all-levels="false" class="w100" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="菜单名称" prop="MENUNAME">
							<el-input v-model="state.ruleForm.MENUNAME" placeholder="菜单名称" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

---

element-plus Input Number 数字输入框 固定宽

<el-input-number 
:min="1" :controls="false" style="width: 100%;" 
v-model="state.paramsadd.DAILYDOSE" placeholder="日剂量" />

关注收藏评论