element修改form的el-input宽度,el-select宽度的方法实现

自从用了element-ui,确实好用，该有的组件都有，但是组件间的样式都固定好了，有时候像form表单这样，页面的input、select等宽度不一定会是一样的，可能有些长，有些短，这时候改变这些控件的宽度就有点麻烦了。

看了网上的好多文章，都没有找到解决方案，很多都说在el-input里面加width,但是效果不好，简单总结一下这个

例如我想要这种效果，把描述和邮箱都的宽度width设置长一点

首先在el-select里面增加style=“width:500px”，发现没有效果，为什么呢，因为在elment里面固定好了控件的样式，el-input里面增加style="width:500px"会有效果，但是我觉得更好的做法是利用css样式优先级，覆盖原来的element的css来处理。

我们调试一下页面，看看是那个css样式影响了宽度,可以看到.el-form–inline div.el-input固定为156px

4.利用css的样式优先级，我们在当前的页面再写一个自定义的class,我们首先定义一个当前页面的css，然后在这个页面里面重写css覆盖刚刚的页面样式，这样就不会影响到别的页面样式，

具体做法

1、定义一个当前页面样式user_info_page， 2、设置当前控件的样式descClass，3、在style的descClass样式里面重写这个el-select样式的宽度width

可以看到这样设置之后，el-input或者el-select的宽度就变长了

注：
1.style lang="less"才可以在一个css里面再设置css样式
2.这里的width没有用百分比，会带来新的坑，屏幕小的，页面可能会变形，百分比这个也可以（有空补上），但是可以把el-col的span设置大一点，优化布局，使之减少变形的可能

到此这篇关于element修改form的el-input宽度,el-select宽度的方法实现的文章就介绍到这了,更多相关element修改 el-input宽度,el-select宽度内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue使用element-ui的el-input监听不了回车事件的解决方法

    原因 今天在使用element-ui时,el-input组件监听不了回车事件,如下代码没有想要的效果: <el-input class="search-input" placeholder="请输入内容" v-model="searchText" @keyup.enter="search()"></el-input> 原因应该是element-ui自身封装了一层input标签之后影响了事件的监听,在el

  • 浅谈ElementUI el-select 数据过多解决办法

    目录 1. 场景描述 2.解决办法 el-select组件的options条数过多时的解决方案 业务场景 解决思路 注意事项 1. 场景描述 不知道你有没有这样的经历,下拉框的选项很多,上万个选项甚至更多,这个时候如果全部把数据放到下拉框中渲染出来,浏览器会卡死,体验会特别不好 用人会说element-ui的select有一个remote-method,支持远程搜索,我们让服务端支持一下不就可以了,当然这是一种解决的方案.但是有时候这种方法有时候不一定适用 (1)有时候服务端数据是经过计算返回给

  • element el-input directive数字进行控制

    使用自定义指令格式化el-input 背景 使用element开发的过程中遇到循环的数据只能输入数字,并且有不要小数点,有需要小数点的 使用vue directive 进行控制 开发 页面使用方式 v-numberInt:0="item.first_fee" 0为保留几位小数 <tr v-for="(item,index) in form.valuation_rules" :key="index"> <td class=&quo

  • Vue + Element-ui的下拉框el-select获取额外参数详解

    直接上代码吧~ <el-table-column label="用户类型" width="180"> <template slot-scope="scope"> <el-select v-model="scope.row.roleID" placeholder="请选择" @change="changeRole($event,scope)"> <

  • 详解element-ui中el-select的默认选择项问题

    详解element-ui中el-select的默认选择项问题

    直接绑定将option中的value值绑定给v-model <template> <div> <el-select v-model="query"> <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label"></el-optio

  • vue/vue-cli+express手把教你搭建SSR

    vue/vue-cli+express手把教你搭建SSR

    最近简单的研究了一下SSR,对SSR已经有了一个简单的认知,主要应用于单页面应用,Nuxt是SSR很不错的框架.也有过调研,简单的用了一下,感觉还是很不错.但是还是想知道若不依赖于框架又应该如果处理SSR,研究一下做个笔记. 什么是SSR 把Vue组件渲染为服务器端的HTML字符串,将他们直接发送到浏览器,最后将静态标记混合为客户端上完全交互的应用程序. 为什么要使用SSR 更好的SEO,搜索引擎爬虫爬取工具可以直接查看完全渲染的页面 更宽的内容达到时间(time-to-content),当权请

  • element-ui 远程搜索组件el-select在项目中组件化的实现代码

    在项目中发现使用el-select时写的比较多重复代码,还有就是同一个页面使用el-select会出现label值会显示value值, el-select组件化: <template> <el-select :class="obj&&keyword[keywordAttr.label]? 'selected': ''" :value="keyword" :placeholder="obj && keywor

  • 解决vue elementUI 使用el-select 时 change事件的触发问题

    如下所示: <el-select v-model="level" size="mini" placeholder="请选择" :change="selectChange()"> <el-option v-for="item in select" :key="item.value" :label="item.label" :value="it

  • element修改form的el-input宽度,el-select宽度的方法实现

    element修改form的el-input宽度,el-select宽度的方法实现

    自从用了element-ui,确实好用,该有的组件都有,但是组件间的样式都固定好了,有时候像form表单这样,页面的input.select等宽度不一定会是一样的,可能有些长,有些短,这时候改变这些控件的宽度就有点麻烦了. 看了网上的好多文章,都没有找到解决方案,很多都说在el-input里面加width,但是效果不好,简单总结一下这个 例如我想要这种效果,把描述和邮箱都的宽度width设置长一点 首先在el-select里面增加style=“width:500px”,发现没有效果,为什么呢,因

  • element中form组件prop嵌套属性的问题解决

    element中form组件prop嵌套属性的问题解决

    目录 Introduction 总结 Introduction 分享今天同事问的一个问题, 下面这段代码会报错,先看代码:重点是el-form-item组件的prop属性 <template> <div id="app"> <el-form label-width="100px" :model="ruleForm" :rules="rules"> <el-form-item v-for

  • vue3 element的Form表单用法实例

    目录 引言 设计目标 配置化 参数简单 自由度 实现过程 表单项的格式设计 v-bind的妙用 computed的妙用:实现v-model useAttrs的妙用 表单验证 上传文件 代码总结 到底应不应该使用json 需不需要v-model 性能问题 引言 最近在做一系列后台管理系统,其中用的最多的就是表单和表格了.这里讲一下我最近对表单封装的思考. 以下是我的设计思路以及具体实现,我使用的是vue3+element-plus,因此这个组件也是以这两个库为基础. 已上传npm www.npmj

  • jquery获取form表单input元素值的简单实例

    一般取值方法 $("#id").val(); $("#id").attr("value"); //其中value是元素的属性名如<s:textfield  id="cifName" key="cifName"   name="#request.consBean.cifName" />的id,key,name属性.取到的值是属性后对应双引号里面的字符. function sav

  • vue element table中自定义一些input的验证操作

    官网原话 Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可. 表单 el-form表单必备以下三个属性: :model="ruleForm" 绑定的数据内容 :rules="rules" 动态绑定的rules,表单验证规则 ref="ruleForm" 绑定的对象 template模块 其实问题关键就在于如何给el-form-item动态绑定p

  • Vue2 Element Schema Form 配置式生成表单的实现

    Vue2 Element Schema Form 配置式生成表单的实现

    目录 前置知识点 Component $attrs $listeners 表单的结构是什么样的 配置数组数据结构 结语 前置知识点 为了实现一个Schema Form配置式表单的生成,需要了解一部分前置知识点. Component vue 提供了一个内置组件 Component,用来动态渲染组件,举个例子,本篇文章以Element UI 为例,假设我们全局注册了Element UI的组件,那么下面一段代码 <Component is="el-input"></Comp

  • 浅谈jquery采用attr修改form表单enctype不起作用的问题

    做文件上传,需要将表单元素的enctype设置为'multipart/form-data',用jquery的attr方法在目前较新的主流浏览器上测试均可成功,唯独IE下死活不行.后来查阅ie浏览器6,7,8(9+由于开发机为xp,未进行测试)不支持attr的方式来修改enctype属性,需要通过dom元素的原生方法来设置, 代码如下: $('#form1').get(0).encoding = 'multipart/form-data'; 以上这篇浅谈jquery采用attr修改form表单en

  • js form表单input框限制20个字符，10个汉字代码实例

    直接粘贴到html文件便可看到效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-widt

  • Element修改弹窗类组件的层级的实现

    目录 前情 坑位 Why? 解决方案 前情 Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,在项目中我们就使用了它,非常nice 坑位 在使用Element组件的时候,一切都十分顺利,但是在使用弹框类组件Popover 的时候,发现并没有效果. Why? 通过控制台查看元素后发现,其实Popover是有作用的,只是被页面上别的内容遮挡了,是因为zIndex低于页面上其它元素所致 解决方案 通过查询Element文挡后发现官方是有考虑到层级问题,需要指定一

  • elementUI 设置input的只读或禁用的方法

    只读:readonly 在data里定义:readonly: true, 然后在input框里加上readonly就可以了. 禁用:disabled 在data里定义:edit: true, 然后在input框里加上::disabled="edit"就可以了 PS:下面看下elementui通过 disabled 属性指定是否禁用 input 组件,如何用DOM操作取消disabled 属性 <!DOCTYPE html> <html lang="en&qu

随机推荐