vue+ant design vue实现搜索区域form

news2024/12/23 23:30:23

1.要实现的效果:

 form部分form-item自动铺开,间距适当,屏幕大小不同能根据屏幕大小变化。 

2.vue组件中的代码示例

重点html代码:

 <!-- 搜索区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" :labelCol="{span: 8}" :wrapperCol="{span: 14}" @keyup.enter.native="getList">
        <a-row :gutter="24">
          <a-col :md="6" :sm="24">
            <a-form-item :label="this.$t('m.sdata') + this.$t('m.YDate')">
              <a-range-picker style="width: 100%;" :format="dateFormat" :allowClear="false" @change="onChange"
                :placeholder="[$t('m.ystartTime'),$t('m.yendTime')]" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item :label="this.$t('m.user') + this.$t('m.name')">
              <a-input :placeholder="this.$t('m.PleaseEnter') + this.$t('m.user') + this.$t('m.name')"
                v-model="userName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24" :xs="24">
            <a-button style="marginRight:8px" type="primary" @click="getList()">{{ $t('m.Query') }}</a-button>
            <a-button type="primary" @click="handleExport">{{ $t('m.export') }}</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>

重点css代码:

.table-page-search-wrapper {
  .ant-form-inline {
    .ant-form-item {
      display: flex;
      margin-bottom: 24px;
      margin-right: 0;

      .ant-form-item-control-wrapper {
        flex: 1 1;
        display: inline-block;
        vertical-align: middle;
      }

      > .ant-form-item-label {
        line-height: 32px;
        padding-right: 8px;
        width: auto;
      }
      .ant-form-item-control {
        height: 32px;
        line-height: 32px;
      }
    }
  }

  .table-page-search-submitButtons {
    display: block;
    margin-bottom: 24px;
    white-space: nowrap;
  }
}

 3、注意:

1、日期类form-item不会沾满整个a-col导致页面中form-item长度不统一,设置style="width:100%"即可占满

2、如果想要适应更多屏幕,在不同屏幕上展示效果可以使用labelCol,wrapperCol:

:labelCol="{span: 8}" :wrapperCol="{span: 14}"既可以在<a-form>中使用也可以在<a-form-item>中单独使用,用于定义label和内容的占据比例。

与<a-col :md="6" :sm="24">不同的是,<a-row>将一行分为24栅格,col设置的是对应form-item占据一行的栅格数,如果不需要响应设置,可以使用::span="6"来代替md="6" :sm="24"这些。

//data中定义,<a-form>标签中使用        
formItemLayout: {
          labelCol: {
            xs: { span: 7 },
            sm: { span: 4 },
            md: { span: 8 }
          },
          wrapperCol: {
            xs: { span: 17 },
            sm: { span: 20 },
            md: { span: 16 }
          }
        },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/715702.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue 七款低代码平台对比

vue 七款低代码平台对比 摘要平台表单设计form-generatorLowCodeEngine 可视化设计OpenDataVGoView 门户设计AgileBPM轻流云程低代码平台 摘要 调研低代码平台时看了很多网站&#xff0c;被我大概分为了三种&#xff1a;页面设计、可视化设计、门户设计&#xff0c;其中功能也…

【vue3中使用swiper组件】

【vue3中使用swiper组件】超详细保姆级教程 效果展示简介版本安装Swiper用法完整代码展示html静态展示js逻辑展示&#xff08;vue3 --- ts&#xff09;官方文档导入模块 css样式展示 &#xff08;自行更改所需&#xff09;官方文档样式 效果展示 简介版本 安装Swiper 项目终端中…

Observability:Synthetic monitoring - 合成监测入门

从我们的全球测试基础设施监控关键用户旅程&#xff0c;并了解网络和前端性能对用户体验的影响。 全面了解你的网站性能、功能和可用性&#xff08;从开发到生产&#xff09;&#xff0c;并在客户之前发现问题。合成监测&#xff08;synthetic monitoring&#xff09;使你能够模…

关于表单提交

一、表单实例 <!-- 把表单信息放入到表格当中&#xff0c;显示的内容更加整齐 --><form action"" method"get"><h1 align"center">用户注册</h1><input type"hidden" name"action" value"l…

正则表达式 - 语法 | 一看就懂!!!(二)

目录 一、正则表达式 - 语法 二、普通字符 三、非打印字符 四、特殊字符 五、限定符 &#xff08;一&#xff09;限定符用来指定正则表达式的一个给定组件必须要出现多少次才能满足匹配。有 * 或 或 ? 或 {n} 或 {n,} 或 {n,m} 共6种。 &#xff08;二&#xff09;正则表…

Eureka注册失败解决

根据查看网上资料发现是服务端自己自己注册了&#xff0c;所以需要自己关闭服务端注册 加上两行代码 fetch-registry: false register-with-eureka: false 即可注册成功

初级保育员专业知识生活管理考试题库及答案

​本题库是根据最新考试大纲要求&#xff0c;结合近年来考试真题的重难点进行汇编整理组成的全真模拟试题&#xff0c;考生们可以进行专项训练&#xff0c;查漏补缺巩固知识点。本题库对热点考题和重难点题目都进行了仔细的整理和编辑&#xff0c;相信考生在经过了针对性的刷题…

「深度学习之优化算法」(八)萤火虫算法

1. 萤火虫算法简介 (以下描述,均不是学术用语,仅供大家快乐的阅读) 萤火虫算法(Firefly Algorithm,FA)是一种模仿萤火虫之间信息交流,相互吸引集合,警戒危险。算法的原理简单,但实现过程较为复杂,而且算法的提出时间不长,算法的改进、优化处于初级阶段,国内外相应的…

大数据面试题-算法题

目录 1.时间复杂度、空间复杂度理解 2.常见算法求解思想 3.基本算法 3.1冒泡排序 3.2 快速排序 3.3 归并排序 3.4 遍历二叉树 3.5 二分查找 3.6 小青蛙跳台阶 3.7 最长回文子串 3.8 数字字符转化成IP 1.时间复杂度、空间复杂度理解 在计算机算法理论中&#xff0…

Nginx【Nginx核心指令(Gzip压缩指令)、Nginx场景实践(浏览器缓存、防盗链)】(七)-全面详解(学习总结---从入门到深化)

目录 Nginx核心指令_Gzip压缩指令 Nginx场景实践_浏览器缓存 Nginx场景实践_防盗链 Nginx核心指令_Gzip压缩指令 Nginx开启Gzip压缩功能&#xff0c; 可以使网站的css、js 、xml、html 文件 在传输时进行压缩&#xff0c;提高访问速度, 进而优化Nginx性能! Gzip压缩作用 将…

使用OpenCV工具包成功实现人脸检测与人脸识别,包括传统视觉和深度学习方法(附完整代码,吐血整理......)

使用OpenCV工具包实现人脸检测与人脸识别&#xff08;吐血整理&#xff01;&#xff09; OpenCV实现人脸检测OpenCV人脸检测方法基于Haar特征的人脸检测Haar级联检测器预训练模型下载Haar 级联分类器OpenCV-Python实现 基于深度学习的人脸检测传统视觉方法与深度学习方法对比 O…

爱不释手的六款IDEA神仙插件,开发效率翻倍!

一、前言 作为一名开发人员&#xff0c;在众多的 IDE 中&#xff0c;IntelliJ IDEA 无疑是最受欢迎和强大的选择。 除了其本身的功能外&#xff0c;IntelliJ IDEA 还支持各种强大的插件&#xff0c;这些插件可以进一步增强开发体验和效率。 这些插件就像是一些神奇的存在&…

uni-app如何生成海报图片

项目场景&#xff1a; 在uni-app中&#xff0c;通过点击邀请分享海报的方式&#xff0c;可以展示不同的海报&#xff0c;并通过扫描海报上的二维码来实现用户之间的关系绑定&#xff0c;从而实现分销功能&#xff1b;每次生成的海报样式都可能不同&#xff0c;可以根据后台配置…

Java实现PDF转Word【收集整理】

首先感谢 Mgg9702 博主提供的转换依赖包处理&#xff0c;关于如何获得一个破解的pdf转word我这里就不追述了&#xff0c;有需要去看&#xff1a; https://blog.csdn.net/Mgg9702/article/details/124987483?spm1001.2014.3001.5506 我这里主要涉及到整理一个pdf转word的jar工…

Spring Boot原理分析 | SpringApplication、Yaml、Properties

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; Spring Boot Spring开源框架&#xff0c;轻量级的Java开发框架&#xff0c;解决企业级应用开发的复杂性而创建&#xff0c;简化开发 基于POJO的轻量级和最小侵入型编程…

【计算机视觉 | 图像分割】arxiv 计算机视觉关于图像分割的学术速递(6月 30 日论文合集)

文章目录 一、分割|语义相关(8篇)1.1 MIS-FM: 3D Medical Image Segmentation using Foundation Models Pretrained on a Large-Scale Unannotated Dataset1.2 KITE: Keypoint-Conditioned Policies for Semantic Manipulation1.3 SeMLaPS: Real-time Semantic Mapping with La…

labelme的json标签和图像改变分辨率,再将json转换为YOLO的txt格式进行实例分割

最近在做一个分割数据集&#xff0c;训练数据时由于图像数据太大一直爆显存&#xff0c;然后就找了找同时resize图像和json的脚本&#xff0c;然后转换为YOLO格式一直出问题&#xff0c;标签和目标位置对不上&#xff0c;也是困扰了好久&#xff0c;终于解决&#xff0c;记录一…

惠普笔记本U盘重装Win10系统步骤

当惠普笔记本出现系统故障或需要清除所有数据时&#xff0c;通过使用U盘重新安装Win10系统是一个常见且有效的解决方法。重新安装系统可以解决许多问题&#xff0c;并为用户提供一个干净、流畅的操作环境。以下小编将为用户介绍惠普笔记本U盘重装Win10系统步骤。请注意&#xf…

手把手教学,Python 游戏编程之实现飞机大战(含源代码)

文章目录 一、游戏设定 1、游戏界面展示和设定 二、实现过程 1.我方飞机 2、敌方飞机 3、定义武器 4、武器补充库 5、主模块 总结&#xff1a; 前言 我想大家都是有玩过类似飞机大战的射击类游戏&#xff0c;也享受目标被消除通过后带来的愉悦感。 那么如果用Python来实现飞机…

Image Sensor的窗口裁剪

本文介绍Image Sensor的窗口裁剪&#xff0c;Image Sensor的实际像素通常是大于实际所支持的最大分辨率的&#xff0c;有时为了获得想要的分辨率及位置&#xff08;比如与镜头装配相匹配&#xff09;&#xff0c;需要设置Image Sensor的像素输出位置及大小&#xff0c;本文以OS…