Element 表单样式调整

在很多时候我们都会遇到调整各种前端样式的时候，今天就给大伙唠一唠这个 Element 表单调整 input 的方式之一

可能会有人觉得，调个样式不就是去页面 F12 然后找一找对应 class 就行了吗？不就是写个行内样式给他用用就就好了么？等等等等…

但是经过本人粗糙的测试，发现这些方式是不行滴，除非你可以挖到它底层的样式，然后进行覆盖，那样应该是可行的，不过有点小麻烦就是了

好了，废话不多说！咱们直接上才艺！

示例代码

<template><div id="app"><el-form ref="loginForm" v-model="loginForm" :rules="loginRules" label-position="left"><el-form-item label="用户名" prop="username"><el-input v-model="loginForm.username" placeholder="请输入用户名"/></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" placeholder="请输入密码" v-model="loginForm.password" show-password /></el-form-item></el-form></div>
</template><script>export default {data() {return{loginForm:{username: '',password: ''}}}
}
</script><style></style>

以上就是使用默认样式的，如果在标签里使用行内样式或者是添加class又或者是添加 id样式都是没得用的

所以…

使用 JS 改变 input 高度

<template><div id="app"><el-form ref="loginForm" v-model="loginForm" :rules="loginRules" label-position="left"><el-form-item label="用户名" prop="username"><el-input id="name" v-model="loginForm.username" placeholder="请输入用户名"/></el-form-item><el-form-item label="密码" prop="password"><el-input id="pass" type="password" placeholder="请输入密码" v-model="loginForm.password" show-password /></el-form-item></el-form></div>
</template><script>export default {data() {return{loginForm:{username: '',password: ''}}},mounted() {document.getElementById('name').style.height = '60px'document.getElementById('pass').style.height = '60px'}
}
</script>

获取到对应 id 元素，然后进行对应调整

（…本文仅供参考，希望对大家有所帮助！）

Element 表单样式调整相关推荐

还不错的Table样式和form表单样式
作为一个后台开发人员而言,拥有一套属于自己的前台样式是比较重要的,这里分享一下自己感觉还不错的样式,以后遇到好的,还会陆续添加上图: 带鼠标滑动效果的table样式看起来比较清爽样式 <he ...
Element表单验证（2）
Element表单验证(2) 上篇讲的是async-validator的基本要素,那么,如何使用到Element中以及怎样优雅地使用,就在本篇. 上篇讲到async-validator由3大部分组成 ...
Element 表单只能输入数字校验
Element 表单只能输入数字校验以下验证均为只能输入数字类型只能输入整数 <el-input v-model="value" placeholder="请输 ...
1-17. Bootstrap 表单样式汇总
网站数据交互一般都是通过表单实现 Bootstrap中表单布局类型有哪些? 垂直表单内联表单水平表单向父 <form> 元素添加 role="form" 把标签和 ...
用于设定表格样式的附加css,css设置表格与能表单样式.ppt
css设置表格与能表单样式第6章 CSS设置表格与表单样式学习目标什么是表格模型对数据表格应用样式. 创建简单和复杂的表单布局对各种表单元素应用样式. 掌握CSS中用列表制作各种菜单的方法. ...
Element 表单的 rules 验证 Number
在使用 Element 表单的时候,验证数字是很正常的需求. Element的表单验证用的是 async-validator ,查看可以设置 type 来进行验证 number ,我最初使用的如下: ...
element 表单下拉菜单点击上下箭头失效
element 表单下拉菜单点击上下箭头失效使用表单的Form-Item Slot 把label改成下拉菜单,然后点击箭头图标不触发下拉事件解决办法:el-form-item上一定要加上prop ...
【VUE 表单验证】vue Element 表单验证中多层v-for验证方法
vue Element 表单验证中对象有list列表如何验证正常情况下只需要<el-form-item> 标签中填入prop数据属性即可. <el-form-item label ...
精通CSS.DIV网页样式与布局（五） ——设置表格与表单样式
原文地址为: 精通CSS.DIV网页样式与布局(五) --设置表格与表单样式表格和表单是网页中非常重要的两个元素,我们这次来说说CSS如何设置表格和表单样式.我们先来看看CSS如何控制表格. 首先表 ...
css美化表格和表单样式
Css美化表格和表单样式表格创建默认是没有边框的,我们要用boder属性去设置表格的边框表格基本样式表格边框合并boder-collapse 在显示表格时,通常来说表格都是有边框的,边框的作用: ...

Element 表单样式调整

Element 表单样式调整

Element 表单样式调整相关推荐

最新文章

热门文章