当前位置: 首页 > news >正文

Vue3中搜索表单的二次封装

最近使用Vue3+ElementPlus开发项目,从整体上构思组件的封装。能写成组件的内容都进行封装,方便多个地方使用。
受AntDesign的启发,在项目中有搜索表单+table+分页的地方可以封装为一个组件,只需要对组件传入table的列,组成一个配置项,通过配置可以显示搜索表单、table项的内容展示等等。
那么在使用ElemenPlus开发时,是没有这样的组件可以使用的。又一想项目中好多个地方都有搜索表单+Table的形式,那不如直接封装个搜索表单,这样就省去了一遍一遍的表单的重复编写。封装好的组件只需要传入进入配置内容即可实现搜索的效果。

实现思路:

  1. 搜索表单无非就是文本框、选择框、时间选择、时间范围选择、数字框,通过配置项里传入type即可判断展示哪种类型的form-item。
  2. 数值绑定,v-model与传入项的匹配,在配置项中传入prop,然后在子组件中创建form响应式对象。
  3. 数据初始值、选项列表等等都通过配置项传入。
  4. 搜索表单的搜索与重置按钮,提交emit事件即可。

首先:创建SearchForm.vue组件

该组件实现了输入框、选择框、单日期、双日期(一般搜索表单也就这些,如果还有其他的类型,读者可以自己添加)。

<script setup>import { reactive, onMounted } from "vue"import DateRangePicker from '@/components/DateRangePicker/index.vue'const props = defineProps({itemList: Array})const emit = defineEmits(['search', 'reset'])let form = reactive({})onMounted(() => {props.itemList.map(item => {if(item.type === 'dateRange') {form[item.start] = ''form[item.end] = ''}else {form[item.prop] = item.initValue ? item.initValue : ''}})})
</script><template><el-form :model="form" inline label-width="120px"><template v-for="(item, index) in props.itemList" :key="index"><el-form-item:label="item.label":prop="item.prop"><el-select v-if="item.type === 'select'" v-model="form[item.prop]" placeholder="请选择" clearable><el-option v-for="i in item.list" :key="i.value" :label="i.label" :value="i.value"/></el-select><el-date-picker v-if="item.type === 'date'" :type="item.dateType" v-model="form[item.prop]" placeholder="请选择" clearable/><date-range-pickerv-if="item.type === 'dateRange'"v-model:start="form[item.start]"v-model:end="form[item.end]"/><el-input-number v-if="item.type === 'number'" v-model="form[item.prop]" placeholder="请输入" clearable/><el-input v-if="item.type === 'input'" v-model="form[item.prop]" placeholder="请输入" clearable/></el-form-item></template><el-form-item><el-button @click="emit('search', form)" type="primary" icon="Search">查询</el-button><el-button @click="emit('reset')" type="primary" plain icon="Refresh">重置</el-button></el-form-item></el-form>
</template>

其次:DateRangePicker组件

这个组件是用来实现选择范围日期的,因为范围日期返回的是一个数组,如果不进行封装处理一下的话,在项目中每写一个该组件都会要写change事件来处理数据值,还挺麻烦。封装之后,只需要将对应的model传给该组件即可实现双向绑定。

<script setup>
import { ref } from "vue";
const emit = defineEmits(['update:start', 'update:end'])
const props = defineProps({start: {type: String,required: true},end: {type: String,required: true},type: {default: 'daterange'  // daterange、datetimerange、monthrange},format: {default: 'YYYY-MM-DD'},valueFormat: {default: 'YYYY-MM-DD HH:mm:ss'}
})
let dateRange = ref([])const dateChange = (e) => {emit('update:start', e ? e[0] : '')emit('update:end', e ? e[1] : '')
}
</script><template><el-date-picker v-model="dateRange":type="props.type":format="props.format":value-format="props.valueFormat"start-placeholder="开始日期"end-placeholder="结束日期"@change="dateChange"/>
</template>

最后一步:使用SearchForm组件

经过前两步的封装之后,在使用的SearchForm组件时,简直是爽的不要不要的。看示例:

<script setup>import { reactive, ref } from 'vue'import SearchForm from '@/components/SearchForm/index.vue'import ProListItem from '@/views/project/components/ProListItem.vue'import { projectList } from '@/api/project';const searchFormList = [{label: '项目名称', prop: 'name', type: 'input'},{label: '项目编码', prop: 'code', type: 'input'},{label: '项目描述', prop: 'desc', type: 'select', list: [{label: '未开始', value: 1}, {label: '已开始', value: 2}]},{label: '创建日期', type: 'dateRange', start: 'startTime', end: 'endTime'}]const dataSource = ref([])const queryForm = ref()const pagination = reactive({pageNum: 1,pageSize: 10,total: 0})const search = (form) => {console.log(form);queryForm.value = formqueryProject()}const queryProject = () => {projectList({...queryForm.value,pageNum: pagination.pageNum,pageSize: pagination.pageSize}).then((result) => {dataSource.value = result.data.listdata.total = result.data.total}).catch((err) => {});}
</script>
<template><search-form :item-list="searchFormList"@search="search"/><pro-list-item :data="dataSource"/>
</template>

啥也不说了,直接看示例,用起来多方便!!!只要项目中有要写搜索表单的地方,直接引入SearchForm组件,配置一下itemList即可实现完整功能!学会了的小伙伴赶紧去用起来吧。

相关文章:

Vue3中搜索表单的二次封装

最近使用Vue3ElementPlus开发项目&#xff0c;从整体上构思组件的封装。能写成组件的内容都进行封装&#xff0c;方便多个地方使用。 受AntDesign的启发&#xff0c;在项目中有搜索表单table分页的地方可以封装为一个组件&#xff0c;只需要对组件传入table的列&#xff0c;组成…...

百度23Q2财报最新发布:营收利润加速增长,AI+生态战略渐显规模

百度集团-SW(9888.HK)Q2财报已于2023/08/22(美东)盘前发布&#xff0c;二季度百度集团整体收入实现341亿元&#xff0c;同比增长15%;归属百度的净利润(non-GAAP)达到80亿元&#xff0c;同比增长44%。营收和利润双双实现大幅增长&#xff0c;超市场预期。其中&#xff0c;百度核…...

一个pdf文件分割成两个

# -- coding: utf-8 --** import PyPDF2 # 打开原始PDF文件 # with open(zhongguojinxiandaishi.pdf, rb) as pdf_file: # pdf_reader PyPDF2.PdfReader(pdf_file) # num_pages len(pdf_reader.pages) # # # 确定分割点&#xff08;例如&#xff0c;将页面一分为二&#xff0…...

Android 保存图片

这个主要讲的InputStream去保存。 如果需要BItmap与InputStream相互转换可以参考 Android Bitmap、InputStream、Drawable、byte[]、Base64之间的转换关系 保存图片我们需要考虑系统版本&#xff0c;Q前后还是不一样的。 /*** 保存图片* param context 上下文* param inputS…...

Android相机-架构

引言&#xff1a; 主要是针对CameraAPI v2 HAL3的架构对Android相机系统进行梳理。 相机架构 App和FrameWork Camera API v2位于&#xff1a; packages/apps/Camer2 frameworks/ex/camera2 应用框架级别&#xff0c;使用Camera2 API与相机的硬件进行交互。通过调用Binder接口…...

从C语言到C++_33(C++11_上)initializer_list+右值引用+完美转发+移动构造/赋值

目录 1. 列表初始化initializer_list 2. 前面提到的一些知识点 2.1 小语法 2.2 STL中的一些变化 3. 右值和右值引用 3.1 右值和右值引用概念 3.2 右值引用类型的左值属性 3.3 左值引用与右值引用比较 3.4 右值引用的使用场景 3.4.1 左值引用的功能和短板 3.4.2 移动…...

如何在Linux系统中处理PDF文件?

如何在Linux系统中处理PDF文件&#xff1f; 1.查看PDF文档2.合并PDF文档3.压缩PDF文档4.提取PDF文本 PDF文件是一种特殊的文件格式&#xff0c;它可以在不同的操作系统中实现跨平台的文件传输和共享。Linux系统作为一种自由开放的操作系统&#xff0c;拥有丰富的PDF文件处理工具…...

SpringBoot实现热部署/加载

在我们修改完项目代码后希望不用重启服务器就能把项目代码部署到服务器中(也就是说修改完项目代码后不用重启服务器修改后的项目代码就能生效)。 一、实现devtools原理 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-…...

我是如何使用Spring Retry减少1000 行代码

使用 Spring Retry 重构代码的综合指南。 问题介绍 在我的日常工作中&#xff0c;我主要负责开发一个庞大的金融应用程序。当客户发送请求时&#xff0c;我们使用他们的用户 ID 从第三方服务获取他们的帐户信息&#xff0c;保存交易并更新缓存中的详细信息。尽管整个流程看起来…...

ARM开发(stm32 cortex-A7核IIC实验)

1.实验目标&#xff1a;采集温湿度传感器值&#xff1b; 2.分析框图&#xff08;模拟IIC控制器&#xff09;&#xff1b; 3.代码&#xff1b; ---iic.h封装时序协议头文件--- #ifndef __IIC_H__ #define __IIC_H__ #include "stm32mp1xx_gpio.h" #include "st…...

「Java」《Java集合框架详解:掌握常用集合类,提升开发效率》

Java集合框架详解&#xff1a;掌握常用集合类&#xff0c;提升开发效率 摘要&#xff1a;一. 引言二. 集合框架概述三. 集合接口详解四. 集合类的选择五. 泛型和类型安全六. 集合的线程安全七. 高级集合类和算法八、Java集合实践操作示例1. 创建和初始化集合&#xff1a;2. 遍历…...

游戏出海需知:Admob游戏广告变现策略

越来越多的出海游戏公司更加重视应用内的广告变现&#xff0c;而 AdMob因为其提供的丰富的广告资源&#xff0c;稳定平台支持&#xff0c;被广泛接入采用。 Admob推出的广告变现策略包括bidding、插页式激励视频、开屏广告、各种细分功能的报告等等。 一、Bidding 竞价策略 …...

【linux】NFS调试总结

文章目录 00. ENV10. 简述20. 下载、安装、配置30. 使用1. 从uboot中设置NFS启动文件系统2. 调试 80. 问题1. NFS版本不匹配问题 90. 附件91. 服务端NFS配置项简述 00. ENV ubuntn1804 10. 简述 百度百科&#xff1a;https://baike.baidu.com/item/%E7%BD%91%E7%BB%9C%E6%96%87…...

wireshark进行网络监听

一、实验目的&#xff1a; 1&#xff09;掌握使用CCProxy配置代理服务器&#xff1b; 2&#xff09;掌握使用wireshark抓取数据包&#xff1b; 3&#xff09;能够对数据包进行简单的分析。 二、预备知识&#xff1a; 包括监听模式、代理服务器、中间人攻击等知识点&#xf…...

时间复杂度

一、时间复杂度 时间复杂度是计算机科学中用来衡量算法运行时间随输入规模增加而增长的速度。简单来说&#xff0c;它是一个衡量算法执行效率的指标&#xff0c;表示算法运行所需时间与输入数据量之间的关系。 时间复杂度通常用大O符号&#xff08;O&#xff09;来表示&#…...

Unity实现广告滚动播放、循环播放、鼠标切换的效果

效果&#xff1a; 场景结构&#xff1a; 特殊物体&#xff1a;panel下面用排列组件horizent layout group放置多个需要显示的面板&#xff0c;用mask遮罩好。 using System.Collections; using System.Collections.Generic; using DG.Tweening; using UnityEngine; using Unity…...

LangChain + Streamlit + Llama:将对话式AI引入本地机器

推荐&#xff1a;使用 NSDT场景编辑器 助你快速搭建可二次编辑的3D应用场景 什么是LLMS&#xff1f; 大型语言模型 &#xff08;LLM&#xff09; 是指能够生成与人类语言非常相似的文本并以自然方式理解提示的机器学习模型。这些模型使用包括书籍、文章、网站和其他来源在内的…...

Python 读写 Excel 文件库推荐和使用教程

文章目录 前言Python 读写 Excel 库简介openpyxl 处理 Excel 文件教程pandas 处理 Excel 文件教程总结 前言 Python 读写 Excel 文件的库总体看还是很多的&#xff0c; 各有其优缺点&#xff0c; 以下用一图总结各库的优缺点&#xff0c; 同时对整体友好的库重点介绍其使用教程…...

“深入解析JVM:理解Java虚拟机的工作原理和优化技巧“

标题&#xff1a;深入解析JVM&#xff1a;理解Java虚拟机的工作原理和优化技巧 摘要&#xff1a;本文将深入探讨Java虚拟机&#xff08;JVM&#xff09;的工作原理和优化技巧。我们将从JVM的基本结构开始&#xff0c;逐步介绍其工作原理&#xff0c;并提供一些实际示例代码&am…...

解决SEGGER Embedded Studio无法显示Nordic MCU外设寄存器问题

如果使用SES调试NRF52840的时候发现&#xff0c;官方例程只能显示CPU寄存器&#xff0c;但是无法显示外设寄存器时&#xff0c;解决办法如下&#xff1a; 1.在解决方案右键→Options→Debug→Debugger&#xff0c;然后Target Device选择正确的型号。 2.Register Definition Fil…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

前端倒计时误差!

提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

MySQL:分区的基本使用

目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区&#xff08;Partitioning&#xff09;是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分&#xff08;分区&#xff09;可以独立存储、管理和优化&#xff0c;…...