Ant Design Vue 表单添加边框样式 - 如何为 Ant Design Vue 表单元素添加边框

<style>
    .bordered-row {
        border: 1px solid #ccc;
        padding: 10px;
    }
</style>
<a-row class="bordered-row">
    <a-col :span="12">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="工号" prop="workId">
            <a-list>
                <a-list-item>{{ mdl.workId }}</a-list-item>
            </a-list>
        </a-form-model-item>
    </a-col>
    <a-col :span="12">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="姓名" prop="name">
            <a-list>
                <a-list-item>{{ mdl.name }}</a-list-item>
            </a-list>
        </a-form-model-item>
    </a-col>
</a-row>
<a-row class="bordered-row">
    <a-col :span="12">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="职务" prop="postName">
            <a-list>
                <a-list-item>{{ mdl.postName }}</a-list-item>
            </a-list>
        </a-form-model-item>
    </a-col>
    <a-col :span="12">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="职务编码" prop="postCode">
            <a-list>
                <a-list-item>{{ mdl.postCode }}</a-list-item>
            </a-list>
        </a-form-model-item>
    </a-col>
</a-row>
<a-row class="bordered-row">
    <a-col :span="12">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="职级" prop="slyGrade">
            <a-list>
                <a-list-item>{{ mdl.slyGrade }}</a-list-item>
            </a-list>
        </a-form-model-item>
    </a-col>
    <a-col :span="12">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="公司编码" prop="compCode">
            <a-list>
                <a-list-item>{{ mdl.compCode }}</a-list-item>
            </a-list>
        </a-form-model-item>
    </a-col>
</a-row>
<a-row class="bordered-row">
    <a-col :span="12">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="公司名称" prop="compName">
            <a-list>
                <a-list-item>{{ mdl.compName }}</a-list-item>
            </a-list>
        </a-form-model-item>
    </a-col>
    <a-col :span="12">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="部门" prop="deptName">
            <a-list>
                <a-list-item>{{ mdl.deptName }}</a-list-item>
            </a-list>
        </a-form-model-item>
    </a-col>
</a-row>
<a-row class="bordered-row">
    <a-col :span="12">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="部门编码" prop="deptId">
            <a-list>
                <a-list-item>{{ mdl.deptId }}</a-list-item>
            </a-list>
        </a-form-model-item>
    </a-col>
    <a-col :span="12">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="入职时间" prop="dateIn">
            <a-list>
                <a-list-item>{{timestampToYMD(mdl.dateIn)  }}</a-list-item>
            </a-list>
        </a-form-model-item>
    </a-col>
</a-row>
<a-row class="bordered-row">
    <a-col :span="12">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="离职类型" prop="leaveOrTransfer">
            <a-radio-group v-model="mdl.leaveOrTransfer"  disabled>
                <a-radio value="离职">
                    离职
                </a-radio>
                <a-radio value="调岗">
                    调岗
                </a-radio>
                <a-radio value="个人工作变动">
                    个人工作变动
                </a-radio>
                <a-radio value="退休">
                    退休
                </a-radio>
            </a-radio-group>
        </a-form-model-item>
    </a-col>
    <a-col :span="12">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="离职时间" prop="dateOut">
            <a-list>
                <a-list-item>{{ timestampToYMD(mdl.dateOut) }}</a-list-item>
            </a-list>
        </a-form-model-item>
    </a-col>
</a-row>
<a-row class="bordered-row">
    <a-col :span="12">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="调岗时间" prop="transferTime">
            <a-list>
                <a-list-item>{{ timestampToYMD(mdl.transferTime) }}</a-list-item>
            </a-list>
        </a-form-model-item>
    </a-col>
    <a-col :span="12" v-if="mdl.leaveInterviewId">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="离职面谈单id" prop="leaveInterviewId">
            <a-list>
                <a-list-item>{{ mdl.leaveInterviewId }}</a-list-item>
            </a-list>
        </a-form-model-item>
    </a-col>
</a-row>
<a-row class="bordered-row">
    <a-col :span="12">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="离职原因" prop="reasonForLeaving">
            <a-radio-group v-model="mdl.reasonForLeaving" v-if="mdl.leaveOrTransfer === '离职'" disabled>
                <a-radio value="个人原因辞职">
                    个人原因辞职
                </a-radio>
                <a-radio value="合同期满">
                    合同期满
                </a-radio>
            </a-radio-group>
            <a-radio-group v-model="mdl.reasonForLeaving" v-else-if="mdl.leaveOrTransfer === '退休'" disabled>
                <a-radio value="达到法定退休年龄">
                    达到法定退休年龄
                </a-radio>
            </a-radio-group>
        </a-form-model-item>
    </a-col>
    <a-col :span="12">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="办理者" prop="handledBy">
            <a-list>
                <a-list-item>{{ mdl.handledBy }}</a-list-item>
            </a-list>
        </a-form-model-item>
    </a-col>
</a-row>
<a-row class="bordered-row">
    <a-col :span="12">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="办理者姓名" prop="handledByName">
            <a-list>
                <a-list-item>{{ mdl.handledByName }}</a-list-item>
            </a-list>
        </a-form-model-item>
    </a-col>
    <a-col :span="12">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="联系电话" prop="telephone">
            <a-list>
                <a-list-item>{{ mdl.telephone }}</a-list-item>
            </a-list>
        </a-form-model-item>
    </a-col>
</a-row>
<a-row class="bordered-row">
    <a-col :span="12">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="邮箱" prop="email">
            <a-list>
                <a-list-item>{{ mdl.email }}</a-list-item>
            </a-list>
        </a-form-model-item>
    </a-col>
    <a-col :span="12">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="联系地址" prop="contactAddress">
            <a-list>
                <a-list-item>{{ mdl.contactAddress }}</a-list-item>
            </a-list>
        </a-form-model-item>
    </a-col>
</a-row>
<a-row class="bordered-row">
    <a-col :span="12">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="直接上级" prop="MWorkId">
            <a-list>
                <a-list-item>{{ mdl.MWorkId }}</a-list-item>
            </a-list>
        </a-form-model-item>
    </a-col>
    <a-col :span="12">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="直接上级姓名" prop="MName">
            <a-list>
                <a-list-item>{{ mdl.MName }}</a-list-item>
            </a-list>
        </a-form-model-item>
    </a-col>
</a-row>
<a-row class="bordered-row">
    <a-col :span="12">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="交接人" prop="handoverPerson">
            <a-list>
                <a-list-item>{{ mdl.handoverPerson }}</a-list-item>
            </a-list>
        </a-form-model-item>
    </a-col>
    <a-col :span="12">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="交接人姓名" prop="handoverPersonName">
            <a-list>
                <a-list-item>{{ mdl.handoverPersonName }}</a-list-item>
            </a-list>
        </a-form-model-item>
    </a-col>
</a-row>
<a-row class="bordered-row">
    <a-col :span="12">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="审核人" prop="reviewedBy">
            <a-list>
                <a-list-item>{{ mdl.reviewedBy }}</a-list-item>
            </a-list>
        </a-form-model-item>
    </a-col>
    <a-col :span="12">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="审核人姓名" prop="reviewedByName">
            <a-list>
                <a-list-item>{{ mdl.reviewedByName }}</a-list-item>
            </a-list>
        </a-form-model-item>
    </a-col>
</a-row>