element-ui中form表单input、select框宽度自适应

问题

我们在使用 element-ui 组件库中的 form 组件的时候，发现让每个 el-form-item 呈现多行多列的时候会显得 input、select 框参差不齐，而且当页面的宽度足够大的时候在最左边回留有空隙

在这里插入图片描述

原因

由于它的内置样式无法自适应，所以需要自己来写样式覆盖掉内置样式

解决方法

在 form 组件内的 style 标签内添加如下代码

.el-form-item {
  margin-right: 0 !important;
}
.el-form-item__label {
  position: absolute;
}
.el-form-item__content {
  width: 100%;
  padding-left: 80px;
}
.el-select,
.el-input_inner {
  width: 100%;
}

看效果

在这里插入图片描述上面城市那个地方只需要在标签内添加 style="width: 50%"，如图

在这里插入图片描述