©2020-2024 ioDraw All rights reserved,
Privacy Policy
ant design vue 中 form 表单在使用的时候 labelCol wrapperCol 所设的值把我搞懵了。尤其还有xxl, xl,
lg, md 这些参数。labelCol 是label所占的百分比，wrapperCol 是label后面的内容所占的百分比。xxl, xl, lg, md
这些参数是在不同的分辨率下 labelCol wrapperCol所占的百分比。
代码如下：
<template> <a-form :form="form" class="form-wrapper" labelAlign="right"
:selfUpdate="true" :labelCol="labelCol" :wrapperCol="wrapperCol"
layout="inline" > <a-form-item label="姓名"> <a-input :allowClear="true"
placeholder="请输入" /> </a-form-item> <a-form-item label="性别"> <a-select
placeholder="请输入"> <a-select-option v-for="item in sexOptions" :key="item.id">{
{ item.sex }}</a-select-option> </a-select> </a-form-item> <a-form-item
label="地址"> <a-input :allowClear="true" placeholder="请输入" /> </a-form-item>
<a-form-item label="联系方式"> <a-input :allowClear="true" placeholder="请输入" />
</a-form-item> </a-form> </template> <script> export default { data () { return
{ form: this.$form.createForm(this, { name: 'dynamic_rule' }), labelCol: { //
24格栅格系统，label所占为 a xxl: 5, // ≥1600px 响应式栅格 xl: 8, // ≥1200px 响应式栅格 lg: 10, //
≥992px 响应式栅格 md: 12 // ≥768px 响应式栅格 }, wrapperCol: { // 24格栅格系统，label后面内容所占为
24-a xxl: 19, xl: 16, lg: 14, md: 12 }, sexOptions: [ { id: 0, sex: 'male' }, {
id: 0, sex: 'female' } ] } }, methods: { } } </script> <style scoped>
.form-wrapper { display: grid; grid-template-columns: 25% 25% 25% 25%; }
</style>
上边图片右下角.ant-col-xxl-5 宽度width：20.833333% 因为分辨率为1920*1080的所以 选择的是xxl参数，
label为5
上边图片右下角.ant-col-xxl-19 宽度width: 79.1666667%