el-form elform 对齐方式调整

如下页面表单，展示后就很丑。

页面表单，有时候我们想着最左侧的应该合理整齐的左对齐，右侧的表单都是右对齐，这样页面看起来会整洁很多。

<el-form class="w-100 a_form" style="padding: 0 15px 0px 15px" ref="formRef" label-position="left":model="form" label-width="120px" :rules="formRules"><el-row :gutter="20"><el-col :span="8"><el-form-item class="w-100 is-required" label="出库单号:"><el-input class="w-100" disabled v-model="form.code" placeholder="出库单号"></el-input></el-form-item></el-col><el-col :span="8"><el-form-item label="出库原因:" class="w-100 right-aligned" prop="reason"><el-select class="w-100" v-model="form.reason" filterable clearable placeholder="请选择出库原因"><el-option v-for="item in reasonOptions" :key="item.value" :label="item.label":value="item.value"></el-option></el-select></el-form-item></el-col><el-col :span="8"><el-form-item label="申请部门:" class="w-100 is-required"><el-select class="w-100" v-model="form.deptId" filterable clearable disabledplaceholder="请选择申请部门"><el-option v-for="item in deptOptions" :key="item.value" :label="item.label":value="item.value"></el-option></el-select></el-form-item></el-col></el-row><el-row :gutter="20"><el-col :span="8"><el-form-item label="申请人:" class="is-required"><el-input disabled v-model="form.name" placeholder="请输入申请人"></el-input></el-form-item></el-col><el-col :span="8"><el-form-item class="w-100" label="使用目的:" prop="destination"><el-input class="w-100" v-model="form.destination" placeholder="请输入使用目的"></el-input></el-form-item></el-col><el-col :span="8"><el-form-item label="使用部门:" class="w-100" prop="toDeptId"><el-select class="w-100" v-model="form.toDeptId" filterable clearable placeholder="请选择使用部门"><el-option v-for="item in deptOptions" :key="item.value" :label="item.label":value="item.value"></el-option></el-select></el-form-item></el-col></el-row><el-row :gutter="20"><el-col :span="12"><el-form-item class="w-100 is-required" label="保留位置:"><el-radio-group class="w-100" v-model="form.keepPosition"><el-radio label="1">是</el-radio><el-radio label="0">否</el-radio></el-radio-group></el-form-item></el-col><el-col :span="12"><el-form-item class="w-100 is-required" label="记录冻融次数:"><el-radio-group class="w-100" v-model="form.freezeThaw"><el-radio label="1">是</el-radio><el-radio label="0">否</el-radio></el-radio-group></el-form-item></el-col></el-row><el-row :gutter="20"><el-col :span="12"><el-form-item class="w-100" label="使用时间:" prop="useDate"><el-date-picker class="w-100" v-model="form.useDate" type="date" placeholder="选择使用时间"></el-date-picker></el-form-item></el-col><el-col :span="12"><el-form-item class="w-100 is-required" label="是否归还:"><el-radio-group class="w-100" v-model="form.restitution"><el-radio label="1">是</el-radio><el-radio label="0">否</el-radio></el-radio-group></el-form-item></el-col></el-row><el-row :gutter="0"><el-col :span="24"><el-form-item class="w-100" label="描述:"><el-input class="w-100" type="textarea" :rows="4" v-model="form.remark"placeholder="请输入描述"></el-input></el-form-item></el-col></el-row></el-form>

一、左对齐时，中间出现过多空白 

二、右对齐时，最左侧一列又显示凌乱

三、修正样式后看起来舒服多了

上货：

::v-deep {//目的是让左对齐.el-col:first-child {.el-form-item__label {width: 80px !important;text-align: left;}.el-form-item__content{margin-left: 80px  !important;}}
}

需要注意的是我使用的是栅格cl-row/col布局，你使用的什么就使用什么父元素来筛选。