需求

el-form 表单的el-input和el-select默认宽度度不一致，导致不对齐，如下图。那么如何设置让el-input和el-select的宽度度一致并对齐？

<el-form class="page-form" :model="addForm" :rules="rules" :disabled="flag" ref="addForm" ><el-row><el-col :span="8"><el-form-item label="订单编号" prop="orderNo"><el-input v-model="form.orderNo" :placeholder="showInfo ? '' : '请输入订单编号'" /></el-form-item></el-col><el-col :span="8"><el-form-item label="订单状态" prop="status"><el-select v-model="form.status" clearable><el-optionv-for="dict in order_status":key="dict.value":label="dict.label":value="dict.value"/></el-select>   </el-form-item>          </el-col> </el-row>
</el-form>    

解决办法

（1）单行设置3列，
（2）在标签上设置属性label-position=“left” label-width=“100px”，固定文本的对齐方式和宽度
（3）使用css深度选择器:deep()，统一设置表单元素的宽度

/***修改input,select宽度 */
:deep(.el-collapse .el-input),
:deep(.el-collapse .el-select),
:deep(.el-collapse .el-date-editor){width: 450px;
}

注意，如果是el-dialog弹框页面上的表单，则需要用下面的方式修改

/***修改弹框页面input,select宽度 */
:deep(.el-dialog__body .el-select),
:deep(.el-dialog__body .el-input){width: 400px;
}

当style标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素，父组件的样式将不会渗透到子组件。Vue中的:deep()深度选择器是用于穿透scoped样式限制的特殊语法，主要解决父组件修改子组件/第三方组件内部样式的需求‌。