Ant Design Vue的表单布局

最新推荐文章于 2025-05-08 15:14:02 发布

原创最新推荐文章于 2025-05-08 15:14:02 发布 · 1w 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Ant Design Vue 专栏收录该内容

2 篇文章

订阅专栏

博客介绍了在Ant-Design-Vue中进行文本框布局和标签长度管理的方法。包括使用栅格布局创建行列，在对应列中复制表单内容，配置表单内容的label宽度和文本框宽度，最后展示了最终效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Ant-Design-Vue中的文本框的布局和标签的长度管理

Ant Design Vue的栅格布局使用

1、布局行列创建使用，在form中创建列和行直接复制进即可

<a-row>
      <a-col :span="8">
        col-8
      </a-col>
      <a-col :span="8">
        col-8
      </a-col>
      <a-col :span="8">
        col-8
      </a-col>
</a-row>

2、在对应的得col中复制进对应的表单内容

 <a-row>
          <a-col :span="8">
            <a-form-item
              label="bizName"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback=""
            >
              <a-input
                placeholder="请输入bizName"
                v-decorator="['bizName', {rules: [{required: true, message: '请输入bizName！'}]}]"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              label="entName"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback=""
            >
              <a-input
                placeholder="请输入entName"
                v-decorator="['entName', {rules: [{required: true, message: '请输入entName！'}]}]"/>
            </a-form-item>

          </a-col>
          <a-col :span="8">
            <a-form-item
              label="coefficient"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback=""
            >
              <a-input
                placeholder="请输入coefficient"
                v-decorator="['coefficient', {rules: [{required: true, message: '请输入coefficient！'}]}]"/>
            </a-form-item>
          </a-col>
        </a-row>

3、配置每个表单内容的label宽度和文本框的宽度

label及文本框宽度

配置项

labelCol: {
          xs: {span: 24},
          sm: {span: 8} //控制label的框的长度
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 10}//控制文本框的长度
        }