Antd 表单一行显示两个input

news/2024/7/10 3:15:23 标签: Antd, vue, 前端框架, webpack, 小道仙

目的:Andt一行显示两个input

本来的效果
在这里插入图片描述

代码如下
          <a-form  :form="form"  @submit="handleSubmit" le>                    <a-form-item  label="Note"  :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"  >                       <a-input v-decorator="[ 'note', {rules: [{ required: true, message: 'Please input your note!' }]}]"/>                    </a-form-item>                      <a-form-item label="Gender" :label-col="{ span: 8 }"  :wrapper-col="{ span: 16 }" >                       <a-select                        v-decorator="[  'gender', {rules: [{ required: true, message: 'Please select your gender!' }]} ]"                        placeholder="Select a option and change input text above" @change="handleSelectChange" >                        <a-select-option value="male">  male</a-select-option>                        <a-select-option value="female"> female</a-select-option>                        </a-select>                    </a-form-item>           </a-form>

完成之后的效果

在这里插入图片描述

代码如下
          <a-form  :form="form"  @submit="handleSubmit" le>            <a-row :gutter="24">              <a-col :span="12" >                       <a-form-item  label="Note"  :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"  >                       <a-input v-decorator="[ 'note', {rules: [{ required: true, message: 'Please input your note!' }]}]"/>                    </a-form-item>                </a-col>              <a-col :span="12">                    <a-form-item label="Gender" :label-col="{ span: 8 }"  :wrapper-col="{ span: 16 }" >                       <a-select                        v-decorator="[  'gender', {rules: [{ required: true, message: 'Please select your gender!' }]} ]"                        placeholder="Select a option and change input text above" @change="handleSelectChange" >                        <a-select-option value="male">  male</a-select-option>                        <a-select-option value="female"> female</a-select-option>                        </a-select>                    </a-form-item>               </a-col>            </a-row>        </a-form>

暂时不知道怎么用markdown编辑器格式化代码,有知道可以留言告诉我。


http://www.niftyadmin.cn/n/775190.html

相关文章

最新蓝星DS网源码 附视频教程

介绍&#xff1a; 哈喽&#xff0c;大家好我是蓝星&#xff0c;今天给大家实战搭建一下蓝星DS网&#xff08;大佬请忽略&#xff09; 这个版本是没有后门和授权的&#xff0c;拿去用就可以了&#xff01; 现在开始教学搭建&#xff0c; 首先我们使用的是主机搭建 打开我们的面…

Antd之获取table每一行数据

先看效果图 第一步&#xff1a;在你的action外面套一个template 第二步&#xff1a;获取当前行的数据 第三步&#xff1a;测试 分别点击两个查看按钮&#xff0c;打印出不同的数据

zibll3.3PJ版子比主题去授权无限制

介绍&#xff1a; 子比主题是一款国人开发的简约优雅WP主题。 模块化组件设计、商城支付系统、专注阅读体验。 更多内容直接官方查看。 网盘下载地址&#xff1a; https://zijiewangpan.com/3qL1b84LRdK 图片&#xff1a;

Antd之设置table表头的属性/背景【设置表头的背景色为白色】

这个问题&#xff0c;困扰了我许久&#xff0c;今天终于解决了&#xff0c;开心&#xff0c;哈哈。希望能帮助到各位。 这是未改变之前的效果图 这是改变之后的效果图 第一步&#xff1a;在你的列中增加一个className属性&#xff08;属性值随意&#xff09; 第二步&#xff1…

酷瓜云课堂源码(腾讯云版) v1.1.0

介绍&#xff1a; 酷瓜云课堂是一个依托腾讯云基础服务架构&#xff0c;采用 C 扩展框架 Phalcon 开发的网络教育软件。 酷瓜云课堂系统功能 实现了点播、直播、专栏、会员、微聊等&#xff0c;是一个完整的产品&#xff0c;具体功能我也不想写一大堆&#xff0c;自己体验吧&…

Antd日期选择框中文【最新版本,亲测有效】

不得不说Antd的确蛮好用的&#xff0c;但是还是要吐槽&#xff0c;遇到一点问题百度基本上解决不了&#xff0c;而且文档写的也的确不怎么样 就这个日期选择器&#xff0c;默认竟然不支持中文&#xff1f;&#xff1f;&#xff1f;而且百度了半天都是什么鬼&#xff1f;&#x…

资源站主题 WordPress高仿交易网源码

介绍&#xff1a; WordPress程序 1&#xff1a;直接将下载的压缩包上传到/wp-content/themes/直接解压即可 完成后到后台-外观-启用子主题 2&#xff1a;基本设置-网站整体使用宽屏模式(nwe)&#xff08;开启&#xff09; 3&#xff1a;顶部设置-导航风格&#xff08;选择常规…

创建Moment对象

在做一个日期回显的功能&#xff0c;发现无法回显&#xff0c;原来是需要Moment 对象&#xff0c;但是怎么都创建不了这个对象&#xff0c;弄了很久翻墙才找到答案 效果图 第一步&#xff1a;安装moment &#xff08;说明我这个是在vue里面使用的&#xff09; 1-1&#xff1a…