VUE?Element修改el-input和el-select長度的具體步驟
更新時間：2023年12月01日 10:13:43 作者：心寒丶
這篇文章主要給大家介紹了關于VUE?Element修改el-input和el-select長度的具體步驟,文中通過代碼介紹的非常詳細,對大家學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下
沒有設置樣式之前，采用默認樣式，界面如下：
模擬代碼如下
<el-form-item label="業(yè)務部" prop="team">
<el-input
v-model="queryParams.team"
placeholder="業(yè)務部"
clearable
@keyup.enter="handleQuery"
style="width: 200px"
/>
</el-form-item>
<el-form-item label="業(yè)務部層級" prop="category">
<el-select v-model="queryParams.category" filterable clearable >
<el-option :label="'有效'" :value="1"> 有效</el-option>
<el-option :label="'無效'" :value="0"> 無效</el-option>
</el-select>
</el-form-item>為了美觀需要修改下樣式，使文本框與下拉框的長度一致
第一種：添加style屬性，采用行內樣式修改長度
style="width: 200px"
第二種：添加class屬性，采用內部樣式
stule標簽中設置長度
<style lang='scss' scoped>
.test{
width: 200px;
}
</style>第三種：找到element-ui.scss，采用外部樣式
//設置form表單輸入框，下拉框長度統(tǒng)一
.el-form-item {
.el-input {
width: 200px;
}
.el-select{
width: 200px;
}
}附：vue element 修改el-select控件的長度 style=“width:XXpx“不生效的問題
問題：想要修改一個代碼如下，里面的select的長度，然后單純地通過設置style="width:200px"發(fā)現(xiàn)不生效，實際控件可觸控區(qū)域以及占據(jù)區(qū)域確實變長了，但是視覺上沒有變化。
<template>
<div class="formHeader">
<div style="margin-left:20px">
<span>選項：</span>
<el-select v-model="form.selectValue" placeholder="請選擇" style="width:200px">
<el-option
v-for="item in selectOption"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
</template>
.formHeader .el-input {
border-color: #409EFF;
width: 150px;
}原因：Element-UI 的 el-select （el-cascader也是）使用的其實是 input 標簽 , 而 input 標簽在瀏覽器中存在一個默認的寬度 , 大約是 100px (不同的瀏覽器表現(xiàn)不同) 。而如上圖所示，我設置了el-input的寬度為150px，所以在底層，使用的input還是150px。
解決方法：設置如下樣式即可：
.fromHeader .el-select .el-input {
border-color: #409EFF;
width: 200px;
}總結
到此這篇關于VUE Element修改el-input和el-select長度的具體步驟的文章就介紹到這了,更多相關Element修改el-input和el-select長度內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue移動端右滑屏幕返回上一頁，本文結合實例給大家介紹的非常詳細，并附有源碼下載,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了vue使用leafLet方式(繪圖工具),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要給大家介紹了關于vue.js項目中實用的小技巧，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-11-11
這篇文章主要介紹了使用canvas實現(xiàn)一個vue彈幕組件功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
本文主要介紹了Vue實現(xiàn)未登錄跳轉到登錄頁的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
vue+layui實現(xiàn)select動態(tài)加載后臺數(shù)據(jù)的例子
今天小編就為大家分享一篇vue+layui實現(xiàn)select動態(tài)加載后臺數(shù)據(jù)的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
vue2+tracking實現(xiàn)PC端的人臉識別示例
本文主要介紹了vue2+tracking實現(xiàn)PC端的人臉識別示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了Vue中Number方法將字符串轉換為數(shù)字,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
本文主要介紹了vue-nuxt?登錄鑒權的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要介紹了vue2.0 實現(xiàn)富文本編輯器功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05