el-form-item组件包裹el-select组件时el-option在选择之后宽度被影响问题

最新推荐文章于 2024-06-01 15:46:07 发布
最新推荐文章于 2024-06-01 15:46:07 发布
阅读量163 收藏
点赞数 3
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47177307/article/details/137145699
版权

el-form-item组件包裹el-select组件时el-option在选择之后宽度被影响问题，

没有选择时宽度是一样的，

选择了之后宽度被拉长明显不协调，这里是封装了一个组件，在其他地方引用的时候没有问题，不会被拉长，看了下这里的引入是被el-form-item包裹的，应该是受el-form-item的样式影响了，

      通过f12查看，翻阅了下官方文档，将   el-form-item的宽度label-width设为autoj就好。

现在选择不会被拉长宽度

 

m0_47177307
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在Vue中使用Select选择器拼接label的操作
01-18
我就废话不多说了，大家还是直接看代码吧~ <el-option v-for=item in myproducts :key=item.Id :label=`${item.Name}/${item.Bra
vue实现select下拉显示隐藏功能
12-30
今日，怂怂就来说说，在项目中刚遇到这么一个功能需求； 描述：当下拉选择不同的属性选项，需展示对应的内容界面； select下拉菜单如下： 当下拉选择【表结构变更】、即展示如下界面： 当下拉选择【接口变更】、即展示如下界面： 代码实现 vue.js： //定义一个select下拉菜单 <el-option label=接口变更 va
解决element ui select下拉框不回显数据问题的解决
10-17
主要介绍了解决element ui select下拉框不回显数据问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
elementUI select组件使用及注意事项详解
12-29
elementUI select组件使用详解 动态生成option选项 option选项绑定对应的文本值和value值 作为表单项目，新增、编辑功能 对选项改变后触发相关事件 <div id=app> <el model=form ref=form label-width=100px class=demo-ruleForm> <el label=姓名选择 prop=typeId> <el-select v-model=form.typeId placeholder=请选择 @chang
elementUI select组件默认选中效果实现的方法
12-29
首先，v-model的值为当前被选中的el-option的 value 属性值 需求：进入编辑页面，状态栏默认选中生效，如下显示： html部分代码：
Element - el-form-item 内的 el-select如何自适应宽度
bug制造者
09-30 933
Element - el-form-item 内的 el-select如何自适应宽度
el-select选择组件中@change事件返回对象方法
夏天的博客
01-19 4759
背景需求： 选中多选框的部门后，还要去查询到该部门是否有负责人，有负责人就能够保存；无负责人，就提示“该部门暂未设置负责人”。 解决思路：
el-form-item内多个输入框的 validate 校验
S‘blog
03-02 4073
表单中复合型输入框， 都要满足必填验证规则 。 <el-form-item label="申请贷款银行" prop="bank"> <el-input placeholder="请填写分行和支行信息" v-model="formData.bank2" class="input-with-select" :style="{width: '100%'}"> <el-select v-model="formData.bank1" slot="prepend" pla
el-form内el-select与el-input纵向不对齐的问题
skysys的研究小屋
02-07 4850
解决方法 <el-form :model="form" label-width="100px" size="small"> <el-col :span="8"> <el-form-item label="test1"> <el-input v-model="form.value1" autocomplete="off"></el-input> </el-form-item> </el-c
polkit-0.96-11.el6_10.2 polkit-0.112-26.el7_9.1
02-09
CentOS 6升级到：polkit-0.96-11.el6_10.2 CentOS 7升级到：polkit-0.112-26.el7_9.1
el-form组件实现一个el-form-item中包含多个输入框的表单校验
weixin_55115202的博客
06-25 6064
【代码】el-form组件实现一个el-form-item中包含多个输入框的表单校验。
vue 封装组件el-select，el-select组件值是对象的解决方案
@必意玲
05-19 8453
1.效果（工作中遇到一个问题，记录一下） 1.1 核心代码 在用select组件的时候，官方给出的例子是option 里面的value绑定一个值（不能是对象，绑定的对象的话就会出问题）。但是在开发过程中，确实遇到了需要绑定对象的时候，看官方文档根本没发现怎么解决，后来通过百度，谷歌才知道，原来在select上面加上value-key = id ，然后在option里面的 :key="item....
Vue Element UI 之默认样式修改不成功的问题
倚树探星的博客
02-18 2964
一、问题描述 想要在某个 el-form-item 中添加一个 color 属性，在浏览器调试没有问题，然后就把代码复制粘贴到项目中，但是问题出现了，竟然没有添加上去，what？why？ 这是在测试的时候确定的位置，红框内是测试时添加的样式（这是它该有的样子，然而，当我在项目中写好代码，刷新之后再次来到这里，发现空空如也，红框代码它不在） 这是在项目中修改的代码： <style scope...
CSS-select和option宽度不一致
hzzh_kk的博客
03-23 427
在做手机pc端的表单需求的时候，用浏览器开发者工具将网页切换成手机格式调试时，发现select和option的宽度不一致的问题
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1187
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 491
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
vue3 vue-draggable-next 实现拖拽穿梭框效果
最新发布
游九尘的博客
06-01 277
【代码】vue3 vue-draggable-next 实现拖拽穿梭框效果。
el-form-item 内的el-select设置宽度
07-12
要在 `el-form-item` 内的 `el-select` 上设置宽度，你可以使用 `style` 属性来直接设置内联样式。以下是一个示例： ```html <el-form-item label="选择" prop="option"> <el-select v-model="option" style="width: 200px;"> <!-- select options --> </el-select> </el-form-item> ``` 在上面的示例中，我们将 `el-select` 的宽度设置为 `200px`。你可以根据需要调整 `width` 的值来适应你的布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值