vue3结合element-plus之如何优雅的使用表单组件

背景

在日常开发中,我们会经常使用 element-ui 或者是 antdesign 或者是 element-plus 等组件库实现搜索功能

这里就需要用到相关表单组件

下面就以 element-plus 为例,我们实现一个搜索功能的组件,并且随着屏幕尺寸的变化,其布局也会跟随变化

最终大致效果如下:

这里就没有对布局进行过多的美化,旨在实现其功能

前置知识储备
  •  对vue相关知识熟悉

  • 熟练使用 element-plus
  • 对 v-bind 的使用熟练
  • 插槽相关知识
  • 组件中如何实现双向绑定,这里可以参考一下我之前写的文章:vue2结合element-ui实现TreeSelect 树选择功能_el-tree选择导入-CSDN博客  在里面介绍了如何实现组件间的 v-model 双向绑定

封装组件

base-ui/form/src/form.vue

<

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MySql:多表设计-关联查询

目录 多表设计 代码 运行 数据库设计范式 设计三范式 1、第一范式&#xff1a; 2、第二范式&#xff1a; 3、第三范式&#xff1a; 多表设计_关联查询 外键 外键约束 代码 运行 注意&#xff1a; 应用 代码 运行 代码 运行 关联查询 含义&#xff1a; …

Android14之Binder调试(二百一十一)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

服务器数据恢复—服务器正常断电重启后raid信息丢失的数据恢复案例

服务器数据恢复环境&#xff1a; 一台某品牌DL380 G4服务器&#xff0c;服务器通过该服务器品牌smart array控制器挂载了一台国产的磁盘阵列&#xff0c;磁盘阵列中有一组由14块SCSI硬盘组建的RAID5。服务器安装LINUX操作系统&#xff0c;搭建了NFSFTP&#xff0c;作为内部文件…

【LeetCode】【1】两数之和(1141字)

文章目录 [toc]题目描述样例输入输出与解释样例1样例2样例3 提示进阶Python实现哈希表 个人主页&#xff1a;丷从心 系列专栏&#xff1a;LeetCode 刷题指南&#xff1a;LeetCode刷题指南 题目描述 给定一个整数数组nums和一个整数目标值target&#xff0c;请在该数组中找出…

传感器通过Profinet转Modbus网关与PLC通讯在生产线的应用

Profinet转Modbus&#xff08;XD-MDPN100/300&#xff09;网关可视作一座桥梁&#xff0c;能够实现Profinet协议与Modbus协议相互转换&#xff0c;支持Modbus RTU主站/从站&#xff0c;并且Profinet转Modbus网关设备自带网口和串口&#xff0c;既可以实现协议的转换&#xff0c…

【Java基础】IO流(4) —— 转换流、打印流

【Java基础】IO流(1) —— 简介 【Java基础】IO流(2) —— 字符流 【Java基础】IO流(3) —— 字节流 【Java基础】IO流(4) —— 转换流、打印流 【Java基础】IO流(5) —— 序列流、内存流 【Java基础】IO流(6) —— 随机访问文件流、数据流 转换流 InputStreamReader 是字节输…

VUE H5字体在安卓手机偏上解决

安卓手机展示样式,数字偏上,展示效果如图: 项目内添加新字体,引用新字体 vue 项目需要引入字体的话, 可以移步到这篇文章(无需下载依赖包)Vue3中引入外部自定义字体 项目文件assets内创建font文件夹, 粘贴你想用的字体, 创建对应的css文件; scss代码: font-face {/* 自定义的…

前端学习-day08

文章目录 01-相对定位02-绝对定位03-绝对定位居中04-固定定位05-堆叠顺序06-CSS精灵-基本使用07-案例-京东服务08-字体图标10.垂直对齐方式11-过度12-透明度13-光标类型14-轮播图 01-相对定位 <!DOCTYPE html> <html lang"en"> <head><meta ch…

k8s 声明式资源管理

一、资源配置清单的管理 1.1 查看资源配置清单 声明式管理方法&#xff1a; 1.适合于对资源的修改操作 2.声明式资源管理方法依赖于资源配置清单文件对资源进行管理 资源配置清单文件有两种格式&#xff1a;yaml&#xff08;人性化&#xff0c;易读&#xff09;&#xff0c;j…

高性能负载均衡的分类及架构分析

如何选择与部署适合的高性能负载均衡方案&#xff1f; 当单服务器性能无法满足需求&#xff0c;高性能集群便成为提升系统处理能力的关键。其核心在于通过增加服务器数量&#xff0c;强化整体计算能力。而集群设计的挑战在于任务分配&#xff0c;因为无论在哪台服务器上执行&am…

【C++初阶】--- C++入门(上)

目录 一、C的背景及简要介绍1.1 什么是C1.2 C发展史1.3 C的重要性 二、C关键字三、命名空间2.1 命名空间定义2.2 命名空间使用 四、C输入 & 输出 一、C的背景及简要介绍 1.1 什么是C C语言是结构化和模块化的语言&#xff0c;适合处理较小规模的程序。对于复杂的问题&…

看看汉朝有庙号的七位皇帝,你就知道含金量有多高?

汉朝拥有庙号的七位皇帝你们知道是谁吗&#xff1f; 相比于后世皇帝人手一个庙号的景象&#xff0c;汉朝皇帝庙号的使用是相当严谨的。很多原本拥有庙号的皇帝&#xff0c;最后因为功绩不多或者无功无德&#xff0c;最终被废除庙号。因此&#xff0c;汉朝谨遵“祖有功宗有德”…

LeetCode:78.子集

解答 class Solution:def subsets(self, nums: List[int]) -> List[List[int]]:res[[]]for i in nums:res[[i]num for num in res]return res代码解释 这段代码定义了一个名为Solution的类&#xff0c;并在其中定义了一个名为subsets的方法。该方法接受一个整数列表nums作…

Easy-poi 和 EasyExcel 选型

目录 共同点地址如何选 共同点 easy-poi 和 easyexcel 都是基于 apache poi 进行二次开发的&#xff0c;底层都是依赖的 apache poi使用简单&#xff0c;都可以通过简单的注解实现excel文件的导入导出 地址 esay poi 是一个开源的 excel,word 处理框架。链接 easy excel 是…

Vue 3入门指南

title: Vue 3入门指南 date: 2024/5/23 19:37:34 updated: 2024/5/23 19:37:34 categories: 前端开发 tags: 框架对比环境搭建基础语法组件开发响应式系统状态管理路由配置 第1章&#xff1a;Vue 3简介 1.1 Vue.js的历史与发展 Vue.js由前谷歌工程师尤雨溪&#xff08;Eva…

Java NIO 基础

Java NIO 基础 1. NIO 介绍2. NIO 三大组件2.1 Channel2.1.1 常见的 Channel2.1.2 常用方法 2.2 Buffer2.2.1 常见的 Buffer2.2.2 重要属性2.2.3 常用方法 2.3 Selector2.3.1 四种事件类型 1. NIO 介绍 NIO&#xff08;non-blocking io&#xff09;&#xff1a;非阻塞IO&#…

无网环境禁止 WPS 提示登录,且基本功能按钮可用

目前 WPS 升级后&#xff0c;每次打开都会提示你登录 WPS&#xff0c;并且在未登录之前所有基本功能按钮是置灰状态&#xff0c;无法使用。 如此一来&#xff0c;在内网或无网环境&#xff0c;我们无法登陆 WPS &#xff0c;就给我们的使用带来了极大的不便&#xff0c;那么有没…

go升级后 编译的exe在win7上无法正常运行

D:/Go/src/runtime/sys_windows_amd64.s:65 x75 fpx22fca sp-0x22fc8日 升级到go 1.21后报一堆错误&#xff0c;要死了啊 原来是go 1.21不支持win7了&#xff0c;必须把go退回到1.20版本 谷歌发布编程语言 Go 1.21 版本&#xff1a;取消支持微软 Win7/8 及苹果 macOS 10.13/10…

Vue3实战笔记(33)—组件传值props终章

文章目录 前言一、运行时声明、基于类型的声明二、一个小小的好奇心三、非 script setup场景下总结 前言 在 Vue 3 中&#xff0c;组件的声明方式主要有两种&#xff1a;运行时声明和基于类型的声明。这两种方式在 Vue 3 的 Composition API 中体现得尤为明显。 一、运行时声明…

如何使用Docker快速运行Firefox并实现远程访问本地火狐浏览器

文章目录 1. 部署Firefox2. 本地访问Firefox3. Linux安装Cpolar4. 配置Firefox公网地址5. 远程访问Firefox6. 固定Firefox公网地址7. 固定地址访问Firefox Firefox是一款免费开源的网页浏览器&#xff0c;由Mozilla基金会开发和维护。它是第一个成功挑战微软Internet Explorer浏…