开发避坑短篇（6）：Vue+Element UI 深度选择器实现表单元素精准对齐的技术实践

帧栈2025-07-27 10:03

需求

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

vue 复制代码

<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-option
                    v-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()，统一设置表单元素的宽度

css 复制代码

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

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

css 复制代码

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

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