快捷導(dǎo)航

VUE?Element修改el-input和el-select長(zhǎng)度的具體步驟

更新時(shí)間：2023年12月01日 10:13:43 作者：心寒丶

這篇文章主要給大家介紹了關(guān)于VUE?Element修改el-input和el-select長(zhǎng)度的具體步驟,文中通過代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

沒有設(shè)置樣式之前，采用默認(rèn)樣式，界面如下：

模擬代碼如下

<el-form-item label="業(yè)務(wù)部" prop="team">
    <el-input
            v-model="queryParams.team"
            placeholder="業(yè)務(wù)部"
            clearable
            @keyup.enter="handleQuery"
            style="width: 200px"
        />
</el-form-item>
<el-form-item label="業(yè)務(wù)部層級(jí)" 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>

為了美觀需要修改下樣式，使文本框與下拉框的長(zhǎng)度一致

第一種：添加style屬性，采用行內(nèi)樣式修改長(zhǎng)度

style="width: 200px"

第二種：添加class屬性，采用內(nèi)部樣式

stule標(biāo)簽中設(shè)置長(zhǎng)度

<style lang='scss' scoped>
	.test{
		width: 200px;
	}
</style>

第三種：找到element-ui.scss，采用外部樣式

//設(shè)置form表單輸入框，下拉框長(zhǎng)度統(tǒng)一
  .el-form-item {
    .el-input {
      width: 200px;
    }
    .el-select{
      width: 200px;
    }

  }

附：vue element 修改el-select控件的長(zhǎng)度 style=“width:XXpx“不生效的問題

問題：想要修改一個(gè)代碼如下，里面的select的長(zhǎng)度，然后單純地通過設(shè)置style="width:200px"發(fā)現(xiàn)不生效，實(shí)際控件可觸控區(qū)域以及占據(jù)區(qū)域確實(shí)變長(zhǎng)了，但是視覺上沒有變化。

<template>
    <div class="formHeader">
            <div style="margin-left:20px">
                    <span>選項(xiàng)：</span>
                    <el-select v-model="form.selectValue" placeholder="請(qǐng)選擇" 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也是）使用的其實(shí)是 input 標(biāo)簽 , 而 input 標(biāo)簽在瀏覽器中存在一個(gè)默認(rèn)的寬度 , 大約是 100px (不同的瀏覽器表現(xiàn)不同) 。而如上圖所示，我設(shè)置了el-input的寬度為150px，所以在底層，使用的input還是150px。

解決方法：設(shè)置如下樣式即可：

.fromHeader .el-select .el-input {
        border-color: #409EFF;
        width: 200px;
    }

總結(jié)

到此這篇關(guān)于VUE Element修改el-input和el-select長(zhǎng)度的具體步驟的文章就介紹到這了,更多相關(guān)Element修改el-input和el-select長(zhǎng)度內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: