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%