<el-form :inline="true" size="default" :model="deviceManagement">
    <div class="sch-left">
       <el-form-item style="width: 120px;">
          <el-select placeholder="项目">
            <el-option
              v-for="item in projectDataAll"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
    </div>
</el-form>

在项目中遇到此结构的elementUI框架的使用时，有时会出现宽度设置不上的问题。如图中我们已经给到了el-form-item标签一个宽度的style，但是网页中仍然不显示我们设置的样式。如下图：

于是回到网页寻找样式来源并调试，发现el-form-item标签的宽度是120px，而el-select标签宽度却仍为220px，于是给el-select标签行内样式添加宽度：

<el-select placeholder="项目" style="width:120px !important;">
    <el-option
       v-for="item in projectDataAll"
       :key="item.id"
       :label="item.name"
       :value="item.id"
    />
</el-select>

结果又发现虽然el-select的宽度设置为了120px，但是.el-input的宽度依然是220px，并没有改变。点开.el-input的页面样式，发现width是引用的element本身自带的变量：

.el-input{
    width:var(--el-font-width);
}

ctrl+click点击--el-font-width得到：

--el-input-width{
    var(--el-form-inline-content-width);
}

此时在style标签中两种的直接修改并不能产生改变：

.el-input{
    width:120px !important;
    --el-input-width:120px !important;
}

再次ctrl+click得到：

--el-form-inline-content-width:120px;

t通过root修改依然不能：

:root{
    --el-form-inline-content-width:120px;
}

使用sass定义变量值也不可以：

$el-form-inline-content-width:120px;

最后在行内样式设置就可以啦：

<el-select placeholder="项目" style="--el-form-inline-content-width:120px;">

当然也可以使用scoped CSS。这个是万能的，只需要在组件的style标签添加scoped字段，再在想要修改的样式外面套一层:deep(){}即可：

<style scoped lang="">
.class{
    background:red;
    :deep(){
        .el-input{
            width:120px;
        }
    }
}
</style>