Element VUE修改 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;
    }

  }