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.rhkb.cn/news/397802.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

React应用(基于react脚手架)

react脚手架 1.xxx脚手架&#xff1a;用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置&#xff08;语法检查&#xff0c;jsx编译&#xff0c;devServer&#xff09;下载好了所有相关的依赖可以直接运行一个简单结果 2.react提供了一个用于创建react项目…

AWVS——Web 应用漏洞扫描的强大工具

一、引言 在网络安全日益重要的今天&#xff0c;Web 应用的安全性备受关注。Acunetix Web Vulnerability Scanner&#xff08;简称 AWVS&#xff09;作为一款知名的 Web 应用漏洞扫描工具&#xff0c;为保障 Web 应用的安全发挥了重要作用。本文将详细介绍 AWVS 的功能、特点、…

【vulhub靶场之spring】——

简介&#xff1a; Spring是Java EE编程领域的一个轻量级开源框架&#xff0c;该框架由一个叫Rod Johnson的程序员在2002年最早提出并随后创建&#xff0c;是为了解决企业级编程开发中的复杂性&#xff0c;业务逻辑层和其他各层的松耦合问题&#xff0c;因此它将面向接口的编程思…

【Postman工具】

一.接口扫盲 1.什么是接口&#xff1f; 接口是系统之间数据交互的通道。拿小红到沙县点餐为例&#xff1a;小红想吃鸭腿饭。她要用什么语言来表达&#xff1f;跟谁表达&#xff1f;通过什么表达&#xff1f;按照生活习惯应该是&#xff1a;小红根据菜单对服务员用中文表达她想要…

联通数科如何基于Apache DolphinScheduler构建DataOps一体化能力平台

各位小伙伴晚上好&#xff0c;我是联通数字科技有限公司数据智能事业部的王兴杰。 更好的阅读体验可前往原文阅读:巨人肩膀 | 联通数科如何基于Apache DolphinScheduler构建DataOps一体化能力平台 今天&#xff0c;我将和大家聊一聊联通数字科技有限公司是如何基于Apache Dol…

k8s创建secret并在container中获取secret

k8s创建secret并在container中获取secret 本文使用的deployment和service与我的上一篇文章一样。link也放在下面了&#xff0c;如果不懂什么事deployment和service&#xff0c;可以先看我的上一篇文章。 k8s使用kustomize来部署应用 下面我们将通过创建secret开始。secret是我…

保姆教程篇:手把手教你从零开始本地部署Dify

本教程将指导您在个人电脑上安装和配置 Dify。 为什么需要Dify 在开始具体的教程之前&#xff0c;先搞清楚为什么要选择 Dify。 6 月份&#xff0c;阿里巴巴全球数学竞赛中&#xff0c;首次接受AI参赛。结果令人大跌眼镜&#xff1a;AI选手们的表现完全无法与人类选手相提并…

萌啦数据软件价格多少,萌啦数据软件价格是多少

在当今这个数据驱动的时代&#xff0c;无论是企业运营、市场分析还是个人研究&#xff0c;都离不开高效、准确的数据处理与分析工具。萌啦数据软件&#xff0c;作为业界一颗璀璨的新星&#xff0c;凭借其强大的功能、友好的用户界面以及灵活的数据处理能力&#xff0c;赢得了众…

[SWPUCTF 2021 新生赛]PseudoProtocols(构造伪协议)

打开题目所给的环境我们可以看到这样一句话&#xff1a; 这里我先尝试访问/hint.php &#xff0c;但是发现什么都没有发生&#xff0c; F12查看源代码也并没有发现什么&#xff0c;到这里来看的话似乎没有思路了&#xff0c;但是这个题的题目已经给了我们很明显的提示&#xff…

类和对象(中)(1)

类和对象&#xff08;中&#xff09;(1) 类的默认成员函数 默认成员函数就是用户没有显式实现&#xff0c;编译器会⾃动⽣成的成员函数称为默认成员函数。 ⼀个类&#xff0c;我们不写的情况下编译器会默认⽣成以下6个默认成员函数&#xff0c;需要注意的是这6个中最重要的是…

云计算实训24——python基本环境搭建、变量和数据类型、数据集合、py脚本

一、python环境搭建 确保拥有阿里云镜像 查看python环境 [rootpython ~]# yum list installed | grep python 查看epel是否安装 [rootpython ~]# yum list installed | grep epel 安装epel [rootpython ~]# yum -y install epel-release.noarch 查看是否安装python3 [rootpyt…

【数据结构】mapset详解

&#x1f341;1. Set系列集合 Set接口是一种不包含重复元素的集合。它继承自Collection接口&#xff0c;所以可以使用Collection所拥有的方法&#xff0c;Set接口的实现类主要有HashSet、LinkedHashSet、TreeSet等&#xff0c;它们各自以不同的方式存储元素&#xff0c;但都遵…

OceanBase V4.2特性解析:MySQL模式下GIS空间表达式的场景及能力解析

1. 背景 1.1. OceanBase Mysql gis空间表达式的应用场景及能力 在OceanBase 4.1版本中&#xff0c;mysql模式下支持了gis数据类型以及部分空间对象相关的表达式&#xff0c;随着客户使用空间数据的需求日益增长&#xff0c;需要快速地补齐空间数据存储和计算分析的能力&#…

实景三维:解锁地理信息新维度,引领未来城市智慧之钥

在这个信息爆炸与科技日新月异的时代&#xff0c;地理信息与遥感技术正以前所未有的速度改变我们认知世界的方式。在推动“实景三维平台”这一前沿科技的构建上&#xff0c;它不仅是地理信息的立体呈现&#xff0c;更是智慧城市的基石&#xff0c;打开了通往未来城市规划、管理…

C++设计模式(代理模式)

1. 电话虫 在海贼中&#xff0c;有一种神奇的通信工具叫做电话虫&#xff08;Den Den Mushi&#xff09;&#xff0c;外形如蜗牛&#xff0c;身上带有斑点或条纹或通体纯色&#xff0c;壳顶上有对讲机或按键&#xff0c;不接通时会睡觉&#xff0c;接通时会惊醒&#xff0c;并发…

数据结构之链表

写在前面 链表是一种常用的线性数据结构&#xff0c;在jdk中也提供具体的实现类java.util.LinkedList。本文来看下其相关内容。 1&#xff1a;链表的特点 链表是一种由很多个节点组成的线性数据结构&#xff0c;每个节点都有一个指向下一个节点的引用&#xff0c;从而构成链…

Unity(2022.3.38LTS) - 下载,安装

目录 A. 简介 B. 下载和安装UnityHub C. 下载安装unity编辑器 安装页面 选择版本 添加模块 D.总结 A. 简介 Unity 是一款广泛使用的跨平台游戏开发引擎。 一、主要特点 跨平台性&#xff1a; 支持多种主流平台&#xff0c;包括 Windows、Mac、Linux、iOS、Android、Xb…

LeetCode_sql_day15(262.行程与用户)

描述&#xff1a;262. 行程和用户 - 力扣&#xff08;LeetCode&#xff09; 取消率 的计算方式如下&#xff1a;(被司机或乘客取消的非禁止用户生成的订单数量) / (非禁止用户生成的订单总数)。 编写解决方案找出 "2013-10-01" 至 "2013-10-03" 期间非禁止…

Vue 应用实例的关键方法与配置案例一

目录 createApp createSSRApp app.mount app.unmount app.component app.directive Vue3.X自定义全局指令 Vue2.X自定义全局指令 app.use app.mixin 非 VIP 用户能够免费下载博文资源 createApp createApp 是 Vue 3.0 中用于创建应用实例的方法。它接收一个…

127. Go反射基本原理

文章目录 反射基础 - go 的 interface 是怎么存储的&#xff1f;iface 和 eface 的结构体定义&#xff08;runtime/iface.go&#xff09;&#xff1a;_type 是什么&#xff1f;itab 是什么&#xff1f; 反射对象 - reflect.Type 和 reflect.Value反射三大定律Elem 方法reflect.…