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 disabled
                                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="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布局，你使用的什么就使用什么父元素来筛选。