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 表单样式调整的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。