关于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.hqwc.cn/news/98285.html

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

相关文章

QT C++ 实现网络聊天室

一、基本原理及流程 1&#xff09;知识回顾&#xff08;C语言中的TCP流程&#xff09; 2&#xff09;QT中的服务器端/客户端的操作流程 二、代码实现 1&#xff09;服务器 .ui .pro 在pro文件中添加network库 .h #ifndef WIDGET_H #define WIDGET_H#include <QWidget>…

喜讯 | 数智经营新典范,体验家XMPlus荣获「年度数智经营服务商」

7月27日&#xff0c;“助力运营知识与创新传播”的内容服务平台——运营研究社举行了「2023数字化运营生态大会」&#xff0c;会上正式揭晓了「2023数字化运营生态大奖」的四大榜单&#xff0c;体验家XMPlus荣获「年度数智经营服务商」&#xff01;现场有800运营伙伴齐聚&#…

error:03000086:digital envelope routines::initialization error

项目背景 前端vue项目启动突然报错error:03000086:digital envelope routines::initialization error 我用的开发工具是vscode&#xff0c;node版本是v18.17.0 前端项目版本如下↓ 具体报错如下↓ 报错原因 node版本过高 解决方法 1输入命令 $env:NODE_OPTIONS"--op…

Unexpected mutation of “xxxx“ prop

原因 是因为子级修改了父级的数据&#xff0c;所以eslint执行的时候报了这个错 修复方式 1 如果是弹窗等组件&#xff0c;可以根据功能进行修改&#xff0c;比如我这块用的 element ui 的 dialog&#xff0c;便可以改成这样 使用 model-value 代替 修复方式 2 新建子组件…

潜艇来袭(Qt官方案例-2维动画游戏)

一、游戏介绍 1 开始界面 启动程序&#xff0c;进入开始界面。 2 开始新游戏 点击菜单&#xff1a;File》New Game &#xff08;或者CtrlN&#xff09;进入新游戏。 开始新游戏之后&#xff0c;会有一个海底的潜艇&#xff0c;和水面舰艇对战。 计算机&#xff1a;自动控制…

zabbix配置钉钉告警、和故障自愈

钉钉告警python脚本 cat python20 #!/usr/bin/python3 #coding:utf-8 import requests,json,sys,os,datetime # 机器人的Webhook地址 webhook"钉钉" usersys.argv[1] textsys.argv[3] data{"msgtype": "text","text": {"conten…

MetInfo5.0文件包含漏洞

MetInfo历史版本与文件 环境在这里下载&#xff0c;使用phpstudy搭建 我们来看到这个index.php&#xff0c;如下图所示&#xff0c;其中定义了fmodule变量与module变量&#xff0c;其中require_once语句表示将某个文件引入当前文件&#xff0c;在这个代码中&#xff0c;通过r…

matlab函数 状态空间系统ss、能控性矩阵ctrb、矩阵的秩rank、能控标准型canon、零极点配置place、系统极点pole等函数(线性定常系统)

matlab函数 能控性矩阵ctrb、能控标准型canon、零极点配置place 第一章&#xff0c;线性定常系统 ss 如果已知线性定常系统的ABCD四个矩阵&#xff0c;可以得到状态空间系统 其他更具体的用法请直接看帮助文档。 用法&#xff1a;ss(A,B,C,D) 假如 可以输入 A [-1.5,-2…

Vue——vue3中的ref和reactive数据理解以及父子组件之间props传递的数据

ref()函数 这是一个用来接受一个内部值&#xff0c;返回一个响应式的、可更改的 ref 对象&#xff0c;此对象只有一个指向其内部值的属性 .value。 作用&#xff1a;创建一个响应式变量&#xff0c;使得某个变量在发生改变时可以同步发生在页面上。 模板语句中使用这个变量时…

模拟实现list

目录 list的实现结构节点的实现迭代器的实现第一个模板参数T第二个模板参数Ref第三个模板参数Ptr 实现list中的接口函数插入和删除赋值重载和拷贝构造析构函数 总结 list的实现结构 STL库中的list的结构是双向循环链表&#xff0c;所以我们这里也实现一个双向循环链表 我们这…

万里路,咫尺间:汽车与芯片的智能之遇

目前阶段&#xff0c;汽车产业有两个最闪耀的关键词&#xff0c;就是智能与低碳。 在践行双碳目标与产业智能化的大背景下&#xff0c;汽车已经成为了能源技术、交通技术、先进制造以及通信、数字化、智能化技术的融合体。汽车的产品形态与产业生态都在发生着前所未有的巨大变革…

Python 快速输出接下来几个月的月末日期

# pip install arrow 安装库&#xff08;若已安装 可忽略&#xff09; import arrowEnd_of_month_date [] # 月末日期 for i in range(100):if arrow.now().shift(daysi).format(YYYY-MM-DD)[-2:] 01: # 若日期为 1 号 则返回前一天的日期End_of_month_date.append(arrow.now…