需求

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樣式限制的特殊語法，主要解決父組件修改子組件/第三方組件內部樣式的需求?。