当前位置: 首页 > news >正文

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

本来是两排展示去写,设计要求一排展示,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 和下一个表单项之间的间距 */
}

这样就调整为上下结构了

http://www.lryc.cn/news/417209.html

相关文章:

  • Centos7.9操作系统kdump crash文件vmcore未生成问题
  • 找不到符号 javax.servlet.WriteListener
  • 智能仪表板DevExpress Dashboard v24.1 - 新增级联参数过滤
  • 计算机网络-CSP初赛知识点整理
  • MySQL第1讲--详细安装教程和启动方法
  • SQL创建数据表的一些语句
  • Spring Boot实战:拦截器
  • <数据集>战斗机识别数据集<目标检测>
  • 【python】Python中位运算算法详细解析与应用实战
  • vba 保存word里面的图片_1分钟批量处理100张图片,有Word在
  • Android进阶之路 - 字体加粗,定制化字体粗度
  • ForkJoin框架的解析
  • 使用IDEA2019.1.4创建“hello world”java程序
  • 学习vue3 五,传送,缓存组件以及过渡和过渡列表
  • MyBatis快速学习
  • 24.8.3数据结构|双向循环链表、静态链表
  • C语言典型例题28
  • PHP企业培训考试系统小程序源码
  • 进程状态(三)----- linux 中具体的进程状态(下)
  • 关系型数据库(RDBMS,Relational Database Management System)
  • 使用RK Docker环境编译RK SDK
  • 免费【2024】springboot 付费自习室管理系统的设计与实现
  • 【学习方法】高效学习因素 ② ( 学习动机 | 内在学习动机 | 外在学习动机 | 外在学习动机的调整方向 | 保护学习兴趣 | 高考竞争分析 )
  • 【学习笔记】A2X通信的协议(四)- A2X PC5通信(二)
  • 注意!!可能这是《网络管理员》旧教程最后一次考试,赶紧学起来
  • array postgre gsql 剔除
  • 【Matlab】零阶保持法:连续状态空间方程(含噪声,非线性)离散化处理方法
  • web自动化6-pytest⑦一些基本情况
  • apache 漏洞
  • 简单的docker学习 第11章 镜像中心