Ant design Vue Form表单 labelCol wrapperCol 含义与使用

Ant design Vue Form表单 labelCol wrapperCol 含义与使用

labelCol wrapperCol这两个属性我的理解响应式布局才有用，如果你需要固定多少px，那你最好不要用这两个属性，直接一个witdh给一个固定值就好。还有一点就是这两个属性把屏幕宽度平均分为24份！！！，这个很重要下边会有图片说明。

先拿偷来的两张图更直观的说明这两个属性到底是干嘛用的！！！

如果宁现在不是忙的情况下，请动动发财的小手点击一下官网的这里

他会跳转到这里

<template>
  <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-item
      label="我是占比111"
      validate-status="error"
      help="Should be combination of numbers & alphabets"
    >
      <a-input id="error" placeholder="unavailable choice" />
    </a-form-item>
    <a-form-item label="我是占比222" validate-status="warning">
      <a-input id="warning" placeholder="Warning" />
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  name: "about",
  data() {
    return {
      labelCol: {
        xs: { span: 24 }, //<576px时，lable提示占比,也就是【我是占比111】这几个字的占比。
        sm: { span: 3 }, //>=576px时，lable提示占比，也就是【我是占比111】这几个字的占比。
      },
      wrapperCol: {
        xs: { span: 24 }, //<576px时，input提示占比,也就是input的宽度
        sm: { span: 12 }, //>=576px时，input提示占比,也就是input的宽度
      },
    };
  },
  methods: {},
};
</script>

<style scoped>
</style>

很明显我的屏幕现在宽度大于576px

那么我们只需要翻译这两句话就好，因为 xs: { span: 24 },就没起效！

很明显我的屏幕现在宽度小于576px

那么我们只需要翻译这两句话就好，因为labelCol的sm: { span: 3 }和wrapperCol的sm: { span: 12},就没起效！

结束！！！