通用vue搜索组件里面的重置和搜索按钮功能实现

最新推荐文章于 2024-06-18 21:58:37 发布

七小山

最新推荐文章于 2024-06-18 21:58:37 发布

阅读量2.7k

点赞数

分类专栏： vue3后台管理项目文章标签： vue.js 前端 typescript elementui

本文链接： https://blog.csdn.net/qq_55928824/article/details/128599634

版权

vue3后台管理项目专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、动态绑定对象值

1.一开始是给搜索组件page-search双向绑定一个formData,但是里面的键值是写死的，为了能够复用以及动态绑定，可以给formData动态匹配键值

二、按钮重置功能

1.给重置按钮一个点击事件

2.在重置按钮里面遍历拿到formOriginData键值对里面key值，然后把这个值赋值给formData对应的键值对，由于一开始formData的值是由prop.modelValue拷贝过来的，如果在这里直接把formOriginData赋值给formData,这样只是浅拷贝，没办法深度改变绑定的formData对应的键值对，所以需要采用下列这种办法实现重置

三、搜索按钮功能实现

1.先给搜索按钮一个点击事件

2.然后把搜索的内容通过emit发送给父组件去触发

3.父组件接收queryBtnClick事件

4.父组件里面去进行调用发送请求进行查询的函数

4.可以选择将导出的重置事件和搜索事件这些单独写在一个文件page-search.ts,然后再在page-content文件里面去引用这个page-search

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

七小山

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

基于VUE3+Layui从头搭建通用后台管理系统（前端篇）十一：通用表单组件封装实现

Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。

09-01

1201

本章实现通用表单组件，根据实体配置识别实体属性，并自动生成编辑组件，实现对应数据填充、校验及保存等逻辑。

Vue 组件开发 - 数据输入框组件

←か淡定☆ ヾ的博客

11-27

486

目录设计通用组件的一般思路组件效果1. HTML结构2. index.js3. input-number.js3.1 input-number.js代码注解设计通用组件的一般思路明确需求；设计API（组件的API：只来自props、events 和 slots）； 2.1 确定命名、规则 2.2 编写业务逻辑即使逻辑的第一版没做好，后续还可迭代完善；但如果 API 没设计好，后续修改成本很高。组件效果 1. HTML结构由于本示例以交互功能为主，CSS美化样式简单处：

参与评论您还未登录，请先登录后发表或查看评论

vue 重置按钮功能实现

qq_61726905的博客

10-21

3320

重置按钮功能：按钮代码：图示： 1.初始化查询数据：2.图示方法：重点就是这句：（意思是将初始状态的data复制到当前状态的data,实现重置效果）以上是简单的重置按钮功能；以下是：在有下拉菜单Dropdown 的情况下使用重置按钮就是另一种写法：这里默认选择了年级和班级，用第一种方法，点击重置按钮，会将下拉菜单从默认状态选择变成需要选择的状态重置按钮功能(有下拉菜单情况下适用)： 1.初始化查询数据：（同上）2.图示方法：讲解：（1）在created钩子深拷贝了一份数据模板：（2）在重

vue的按钮重置

qq_42243957的博客

08-04

6964

1、在表单上标记ref 2、按钮绑定重置方法 3、在script写重置方法

Vue el-table 重置按钮设计模板

Muxiu

09-09

831

重点就是这句：（意思是将初始状态的data复制到当前状态的data,实现重置效果）还有这一句：清除 el-table 复选框的选择显示，指的是组件的属性值最后点击重置按钮后的效果类似如下所示：1. vue 重置按钮功能实现2. vue之ele中的table组件（复选框的回显和重置）3. 4-2-vue框架-第三方ui组件elementui-vue- element-ui table复选框翻页记忆与清除

vue+admin+js: 点击重置，重置查询对象属性值。

qq_38969618的博客

06-23

305

listQuery: { page: 1, pageSize: 10, city_id: 321, user_name: '' } this.listQuery = this.$options.data().listQuery; // 重置列表查询对象

vue3里面，如何实现穿梭框自定义重置按钮，点击重置按钮可以清空左侧已选中的数据

zhourongxiang1的博客

03-27

631

操作按钮绑定click方法leftFooter，leftFooter方法中将leftCheckValues设置为空。设置left-default-checked属性绑定data的leftCheckValues。下图是Element UI的穿梭框，要实现的是点击“重置”按钮，清空左侧已选择的“备选项”。同理，右侧的“操作”按钮也能改成“重置”按钮。

vue和mpvue通用的移动设备组件

08-10

日历组件，1.支持农历和节假日（农历1900-2100） * 2.支持左右滑动切换，和点击箭头切换 * 3.点击‘重置’按钮，回到当前日期 * 4.点击‘取消’按钮和灰色背景隐藏组件 * 5.支持特殊日期标记圆点

利用Vue构造器创建Form组件的通用解决方法

12-11

在Vue.js框架中，构建可复用的表单组件是一个重要的任务，因为它涉及到前端应用程序中的数据收集和用户交互。在日常开发中，我们经常会遇到各种类型的表单，如注册、编辑资料等，这些都需要高效、灵活且易于维护的...

vue+elementui 对话框取消表单验证重置示例

10-16

总结而言，实现Vue+Element UI对话框取消表单验证重置的示例展示了如何使用Element UI组件事件和Vue的JavaScript方法来完成表单状态的重置。通过了解和使用el-dialog和el-form组件的特性，以及Vue.js的响应式原理和...

Vue 重置组件到初始状态的方法示例

11-30

Vue 通过直接强制刷新 DOM 来达到重置组件的效果，这样可以重置一些组件的动画以及组件内初始的数据强制重新生成 DOM 的实现原理：强制重新生成 DOM 可以通过 Vue 中的 key 来实现。在 Vue 更新 Dom 时，如果 key 值相同则会对原有组件进行复用，如果不同，则会重新生成。代码示例：每次点击 refresh 按钮，Demo 组件都会重新生成组件： /** * Demo.vue */ Demo [removed] export default { data () { ret

代码模版-实现重置按钮清空表单数据，vue+elementUI

abcnull 的博客

11-15

1626

就能找到这个 ref，然 ref 自己有一个 resetFields() 函数，它的执行可以清空 ref 所在的这个 el-form 中的表单数据，依据 el-form-item 的 prop 来清空，这个 prop 需要和 v-model 相匹配。具体可以看下下放代码，点击「重置」btn 触发 resetForm() 函数。重置 btn 的作用是为了清空前面 form 表单中的数据。我们使用 elementUI + vue 来做。我们在 el-form 组件中加上。页面上可能会有「搜索」按钮。

【转载】vue项目中element-ui实现点击重置按钮，重置表单数据

AllTimeLow丶的博客

06-20

798

vue点击重置按钮，重置登陆表单。

vue重置初始数据功能

q879936814的博客

09-09

1055

第一次点击成功实现，测试时发现，第二次就无效了，思考了一下发现，对象是引用数据类型，那么一旦改变，堆内存地址中的数据都会改变，这样就不是固定存储了，只能实现一次重置。最近接到个编辑页面的需求，重置按钮需要实现点击之后恢复表单展示的页面，最开始的思路是：将赋值一个新对象，然后点击重置按钮，让新对象的值替换到老数据。解决方式：因为数据结构简单，使用浅拷贝即可。

【Vue3】搜索和重置功能