VUE Element修改el-input和el-select长度的具体步骤
作者：心寒丶
这篇文章主要给大家介绍了关于VUE Element修改el-input和el-select长度的具体步骤,文中通过代码介绍的非常详细,对大家学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
没有设置样式之前，采用默认样式，界面如下：
模拟代码如下
<el-form-item label="业务部" prop="team">
<el-input
v-model="queryParams.team"
placeholder="业务部"
clearable
@keyup.enter="handleQuery"
style="width: 200px"
/>
</el-form-item>
<el-form-item label="业务部层级" 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表单输入框，下拉框长度统一
.el-form-item {
.el-input {
width: 200px;
}
.el-select{
width: 200px;
}
}附：vue element 修改el-select控件的长度 style=“width:XXpx“不生效的问题
问题：想要修改一个代码如下，里面的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;
}总结
到此这篇关于VUE Element修改el-input和el-select长度的具体步骤的文章就介绍到这了,更多相关Element修改el-input和el-select长度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！