关于el-input和el-select宽度不一致问题解决

1. 情景一

单列布局

在这里插入图片描述
对于上图这种情况,只需要给el-select加上style="width: 100%"即可,如下:

<el-select v-model="fjForm.region" placeholder="请选择阀门类型" style="width: 100%"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option>
</el-select>

效果如下

在这里插入图片描述

2. 情景二

多列布局
在这里插入图片描述
这种情况下再给select加上width:100%,达不到预期的效果。
这种情况其实是el-select比el-input多了一个下箭头的icon导致的
在这里插入图片描述

解决方案1:
给input加上一个空的icon即可,如下:
在这里插入图片描述

<el-input v-model="fjForm.name" size="medium" suffix-icon=“xxxx”></el-input>        

效果如下:
在这里插入图片描述

解决方案2:

使用flex布局,为每个el-form-item都设置flex:1,并给select设置width:100%,如下:

  • css
.box-flex {display: flex;justify-content: space-between;align-items: center;
}
  • html
        <div class="box-flex"><el-form-item label="阀井名称" style="flex: 1"><el-input v-model="fjForm.name" size="medium"></el-input></el-form-item><el-form-item label="阀井编号" style="flex: 1"><el-input v-model="fjForm.overlayId" size="medium"></el-input></el-form-item></div><div class="box-flex"><el-form-item label="阀门大小" style="flex: 1"><el-input v-model="fjForm.valueSize" size="medium"></el-input></el-form-item><el-form-item label="阀门类型" style="flex: 1"><el-select v-model="fjForm.valveType" placeholder="请选择阀门类型" style="width: 100%"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item></div>

效果如下:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/68039.shtml

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

相关文章

OpenCV(十四):ROI区域截取

在OpenCV中&#xff0c;你可以使用Rect对象或cv::Range来截取图像的感兴趣区域&#xff08;Region of Interest&#xff0c;ROI&#xff09;。 方法一&#xff1a;使用Rect对象截取图像 Rect_(_Tp _x&#xff0c; _Tp _y&#xff0c; _Tp _width,_Tp _height) Tp:数据类型&…

LinkedList(3):并发异常

1 LinkedList并发异常 package com.example.demo;import java.util.Iterator; import java.util.LinkedList;public class TestLinkedList {public static void main(String[] args) {LinkedList linkedList new LinkedList(); //双向链表linkedList.add(11);linkedList.add(…

关于CICD流水线的前端项目运行错误,npm项目环境配置时出现报错:Not Found - GET https://registry.npm...

关于CICD流水线的前端项目运行错误&#xff0c;npm项目环境配置时出现报错&#xff1a;Not Found - GET https://registry.npm… 原因应该是某些jar包缓存中没有需要改变镜像将包拉下来 npm config set registry http://registry.npm.taobao.org npm install npm run build

IDEA中使用Git

参考文章 1. IDEA中配置Git 2 IDEA 中使用Git 2.1 拉取项目 选择File→New→Project from Version Control。 从码云&#xff0c;github中也都可以拉取&#xff0c;实际工作中可能存在于公司搭建的GitLab中。 复制此项目的git地址&#xff0c;填入URL&#xff0c;Director…

分布式事务学习笔记

MySQL事务 1、 MySQL事务隔离级别 读未提交 &#xff08;READ UNCOMMITTED&#xff09; &#xff08;存在脏读的问题&#xff09;读已提交&#xff08;READ COMMITTED&#xff09;可重复读&#xff08;REPEATABLE READ&#xff09;串行化&#xff08;SERIALIZABLE&#xff09;…

基于Matlab实现多个图像增强案例(附上源码+数据集)

图像增强是数字图像处理中的一个重要步骤&#xff0c;它通过一系列的算法和技术&#xff0c;使图像在视觉上更加清晰、明亮、对比度更强等&#xff0c;以便更好地满足人们的需求。在本文中&#xff0c;我们将介绍如何使用Matlab实现图像增强。 文章目录 部分源码源码数据集下载…

《多线程编程实战指南》总结

Java 并发和多线程编程推荐《Java 并发编程实战》和《多线程编程实战指南》&#xff0c;前者是外国非常受欢迎的书籍的翻译本&#xff0c;后者是国人写的书&#xff0c;符合国人的思维模式。 进程、线程与任务 在操作系统中会运行多个程序&#xff0c;一个运行中的程序就是一个…

计算机竞赛 基于深度学习的人脸识别系统

前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于深度学习的人脸识别系统 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng-senior/…

CTFhub-SSRF-内网访问

CTFHub 环境实例 | 提示信息 http://challenge-8bf41c5c86a8c5f4.sandbox.ctfhub.com:10800/?url_ 根据提示&#xff0c;在url 后门添加 127.0.0.1/flag.php http://challenge-8bf41c5c86a8c5f4.sandbox.ctfhub.com:10800/?url127.0.0.1/flag.php ctfhub{a6bb51530c8f6be0…

基于Spring Boot的企业门户网站设计与实现(Java+spring boot+MySQL)

获取源码或者论文请私信博主 演示视频&#xff1a; 基于Spring Boot的企业门户网站设计与实现&#xff08;Javaspring bootMySQL&#xff09; 使用技术&#xff1a; 前端&#xff1a;html css javascript jQuery ajax thymeleaf 微信小程序 后端&#xff1a;Java springboot…

Linux常用命令——csplit命令

在线Linux命令查询工具 csplit 将一个大文件分割成小的碎片文件 补充说明 csplit命令用于将一个大文件分割成小的碎片&#xff0c;并且将分割后的每个碎片保存成一个文件。碎片文件的命名类似“xx00”&#xff0c;“xx01”。csplit命令是split的一个变体&#xff0c;split只…

react轮播图

这里 我用的是组件&#xff1a; 网址&#xff1a;Collapse 折叠面板 - Ant Design Mobile 1.首先 先声明一个变量 2、把需要的数据存存进去 3、组件内容复制过来&#xff08;这里用到的是map循环&#xff09; 然后图片就出来了 就是这个简单 哈哈哈哈&#xff01;&#xff01…

签到系统怎么设计

背景 相信签到系统大家都有接触过&#xff0c;更多的是使用。但是有思考过这种系统是怎么设计的吗&#xff1f;比方说我统计一下每个月中每天的签到情况&#xff0c;怎么设计呢&#xff1f;今天一篇文章告诉你。 首先&#xff0c;我们熟悉的思维是&#xff1a;我设计一个数据…

java IO流(二) 字符流 缓冲流

字符流 前面学习的字节流虽然可以读取文件中的字节数据&#xff0c;但是如果文件中有中文&#xff0c;使用字节流来读取&#xff0c;就有可能读到半个汉字的情况&#xff0c;这样会导致乱码。虽然使用读取全部字节的方法不会出现乱码&#xff0c;但是如果文件过大又不太合适。…

docker使用(二)提交到dockerhub springboot制作镜像

docker使用&#xff08;二&#xff09; dockerhub创建账号创建存储库成功&#xff01;开始推送获取image名 提交成功SpringBoot项目制作Dockerfile镜像部署打jar包 dockerhub创建账号 &#xff08;自认为可以理解为github一类的东西&#xff09; 单击创建存储库按钮。 设定存…

CNN(六):ResNeXt-50实战

&#x1f368; 本文为&#x1f517;365天深度学习训练营中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊|接辅导、项目定制 ResNeXt是有何凯明团队在2017年CVPR会议上提出来的新型图像分类网络。它是ResNet的升级版&#xff0c;在ResNet的基础上&#xff0c;引入了ca…

【mybatis-plus进阶】多租户场景中多数据源自定义来源dynamic-datasource实现

Springbootmybatis-plusdynamic-datasourceDruid 多租户场景中多数据源自定义来源dynamic-datasource实现 文章目录 Springbootmybatis-plusdynamic-datasourceDruid 多租户场景中多数据源自定义来源dynamic-datasource实现0.前言1. 作者提供了接口2. 基于此接口的抽象类实现自…

简单工厂模式概述和使用

目录 一、简单工厂模式简介1. 定义2. 使用动机 二、简单工厂模式结构1.模式结构2. 时序图 三、简单工厂的使用实例四、简单工厂模式优缺点五、简单工厂模式在Java中的应用 一、简单工厂模式简介 原文链接 1. 定义 简单工厂模式(Simple Factory Pattern)&#xff1a;又称为静…

博流RISC-V芯片JTAG debug配置与运行

文章目录 1、Windows下安装与配置2、Linux下安装与配置3、芯片默认 JTAG PIN 列表4、命令行运行JTAG5、Eclipse下使用JTAG 1、Windows下安装与配置 CKLink 驱动安装 Windows版驱动下载地址&#xff1a; https://occ-oss-prod.oss-cn-hangzhou.aliyuncs.com/resource//1666331…

Spring Boot 整合 Redis,使用 RedisTemplate 客户端

文章目录 一、SpringBoot 整合 Redis1.1 整合 Redis 步骤1.1.1 添加依赖1.1.2 yml 配置文件1.1.3 Config 配置文件1.1.4 使用示例 1.2 RedisTemplate 概述1.2.1 RedisTemplate 简介1.2.2 RedisTemplate 功能 二、RedisTemplate API2.1 RedisTemplate 公共 API2.2 String 类型 A…