Ant design Vue Form表单 labelCol wrapperCol 含义

ant design vue 中 form 表单在使用的时候labelCol wrapperCol 所设的值把我搞懵了。尤其还有xxl, xl, lg, md 这些参数。labelCol 是label所占的百分比，wrapperCol 是label后面的内容所占的百分比。xxl, xl, lg, md 这些参数是在不同的分辨率下 labelCol wrapperCol所占的百分比。代码如下：&lt

夜跑者

17835人浏览 · 2021-01-01 21:15:30

夜跑者 · 2021-01-01 21:15:30 发布

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>