elment form 以表格形式展示（利用样式穿透）

当需求为表格样式的表单时即可用下列代码

类似以下表单

html:

<el-form class="form_application" ref="form_application" :model="form_application" label-width="40%">
                <div class="propreinfor">
                    <el-form-item label="活动名称" prop='name'>
                        <div class="contant">
                            <el-input v-model="form_application.name"></el-input>
                        </div>
                    </el-form-item>
                </div>
</el-form>

css:

.form_application {
    //form-class

    .propreinfor {
        //上边框，左边框
        border-left: 1px solid rgb(192, 196, 204);
        border-top: 1px solid rgb(192, 196, 204);
        margin: 0 auto;
    }

    .contant {
        //右边框，下边框
        padding: 5px;
        border-right: 1px solid rgb(192, 196, 204);
        border-bottom: 1px solid rgb(192, 196, 204);
        height: 100% !important;
    }

    /deep/.el-form-item {
        //每一项
        position: relative;
        height: 100%;
        margin-bottom: 0;
        height: auto !important;
    }

    /deep/ .el-form-item__label {
        //左边的laebel以及颜色，高度，字体等
        position: absolute;
        height: 100%;
        border-right: 1px solid rgb(192, 196, 204);
        border-bottom: 1px solid rgb(192, 196, 204);
        padding: 10px;
        background: #f9f9f9;
        font-weight: 400;
        color: #000;
        line-height: normal;
        display: flex;
        align-items: center;//垂直居中
        justify-content: left;//左右居中
    }

    /deep/.el-form-item__content {
        //右边输入框或者下拉框等
        line-height: 40px;
        height: 100%;
    }
    /deep/.el-form-item__error {
        //校验规则的样式，位于输入框下方
        z-index: 999;
        padding-top: 0;
        left: 10px;
        top: calc(100% - 5px);
    }

}