Element 表单样式调整

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 元素，然后进行对应调整

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