问题:想要修改一个代码如下,里面的select的长度,然后单纯地通过设置style="width:200px"发现不生效,实际控件可触控区域以及占据区域确实变长了,但是视觉上没有变化。

<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 (不同的浏览器表现不同) 。而如上图所示,我设置了el-input的宽度为150px,所以在底层,使用的input还是150px。

解决方法:
设置如下样式即可:

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

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐