Ant Vue Form的一些小技巧

最新推荐文章于 2023-02-17 14:08:41 发布

若深情不能对等

最新推荐文章于 2023-02-17 14:08:41 发布

阅读量283

点赞数

分类专栏：前端文章标签：前端大数据

本文链接：https://blog.csdn.net/weixin_42656475/article/details/125852933

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Ant Vue Form的一些小技巧

文章目录

一、label不同字数的处理
二、同一lable对应多个输入框

一、label不同字数的处理

form表单
代码如下（示例）：

<a-form-model-item :label="`姓\xa0\xa0\xa0\xa0\xa0\xa0\xa0名`" prop="patName">
    <a-input v-model.trim="personListForm.patName" placeholder="请输入姓名"></a-input>
            </a-form-model-item>

二、同一lable对应多个输入框

在这里插入图片描述

 <a-col :span="8">
                <a-form-model-item label="接害工龄">
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="年" :label-col="{span: 4,push: 18}" :wrapper-col="{span: 18,pull: 4}">
                  <a-input v-model="patientInfo.memo1" />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="月" :label-col="{span: 4,push: 19}" :wrapper-col="{span: 18,pull: 4}">
                  <a-input v-model="patientInfo.memo2" />
                </a-form-model-item>
              </a-col>
            </a-row>
            </a-form-model-item>
          </a-col>