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

需求

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

解决办法

（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样式限制的特殊语法，主要解决父组件修改子组件/第三方组件内部样式的需求‌。