当前位置: 首页> 游戏> 游戏 > el-form-item,label在上方显示,输入框在下方展示

el-form-item,label在上方显示,输入框在下方展示

时间:2025/7/9 7:35:50来源:https://blog.csdn.net/dy1717/article/details/140986301 浏览次数:0次

本来是两排展示去写,设计要求一排展示,label再上方,输入框、勾选框在下方;只能调整样式去修改;参考label-position这个属性

代码如下:

<el-form ref="form"  :model="formData" class="cncform" :rules="rules" label-width="120px" label-position="top"><el-row><el-col :span="3" class="col-padding"><el-form-item label="故障模式" prop="faultMode" class="custom-form-item"><el-select v-model="formData.faultMode" placeholder="请选择故障模式" style="width: 100%" @change="vehicleModelCodeChange"><el-option v-for="item in importantLevelOption" :key="item.carModelCode" :label="item.carModelCode" :value="item.carModelCode" /></el-select></el-form-item></el-col>...</el-row>
</el-form>
/* 自定义 el-form-item 样式 */
.custom-form-item {display: flex;flex-direction: column;
}.custom-form-item .el-form-item__label {margin-bottom: 10px; /* 调整 label 和 content 之间的间距 */
}.custom-form-item .el-form-item__content {margin-top: 5px; /* 调整 content 和下一个表单项之间的间距 */
}

这样就调整为上下结构了

关键字:el-form-item,label在上方显示,输入框在下方展示

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: