vue中清空搜索框(input)之后自动刷新(获取)列表

已于 2022-04-06 11:15:08 修改
阅读量1.1k 收藏
点赞数
分类专栏： 前端 IT 文章标签： vue.js javascript 前端
于 2022-03-31 10:59:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51396911/article/details/123866242
版权
前端 同时被 2 个专栏收录
47 篇文章 0 订阅
订阅专栏
IT
45 篇文章 0 订阅
订阅专栏

列如在平时的表格搜索框

核心代码

// 把事件换成获取列表的事件
clearable @clear="findUserByName(searchName)"

// searchName:重新加载数据的方法

山顶的云彩
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue音乐--搜索页面12_清空按钮弹窗页面
kingAn123的博客
10-11 386
大概步骤： 目标效果 十二、弹窗页面 要点： 弹窗样式布局 公共组件，外部可控性 （一）、点击垃圾桶show弹窗页面 为了不在没必要的地方渲染，不想以前那样用v-show标识来打开，而是在弹窗页面的组件中设置内置方法 ↓searchHistory.vue <!--弹窗组件--> <confirm ref="confirm" co...
Vue.js页面中有多个input搜索框如何实现防抖操作
10-16
debounce是lodash工具库中的一个非常好用的函数。这篇文章主要介绍了Vue.js页面中有多个input搜索框如何实现防抖操作,需要的朋友可以参考下
Vue-input框checkbox强制刷新问题
10-17
主要介绍了Vue-input框checkbox强制刷新问题，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
input清空和select重置
weixin_30627341的博客
04-19 1043
清空input和重置select标签 清空div下所有input的输入内容 $("#divId input").val(""); 重置select $("#selectId option:first").prop("selected", 'selected') 如果都在表单中写着，直接清空表单也可以 js中 $("#formId").reset(); 因...
vue3 antd table表格的增删改查（一）input输入框根据关键字搜索【后台管理系统纯前端filter过滤】
XSL_HR的博客
11-28 3934
vue3 + antd + filter 纯前端过滤实现输入框input的关键字模糊搜索。通过接口将从后端获取到的数据展现在表格内，现在需要实现，根据关键字进行模糊搜索的功能。UI组件库沿用 ant design vue。
vue+elementui实现搜索功能并且清空搜索框页面刷新
qq_30815659的博客
12-28 3206
在弄分页的时候已经完成了mybatisplus的分页，详情可以看我之前的文章，搜索功能只要加一个带条件的分页查询功能即可 服务接口： public interface MybatisService extends IService<UserVO> { IPage<UserVO> selectByPage(int currentPage, int limit); IPage<UserVO> selectListByAdditon12(String co
vue项目如何刷新当前页面
weixin_30677073的博客
05-18 4735
1.场景 在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。 2.遇到的问题 1. 用vue-router重新路由到当前页面，页面是不进行刷新的 2.采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好 3.解决方法 provide / inject组合 作用：允许一个祖先组件向其所有子孙后代注入...
vue elememnt-ui自带搜索框清空
weixin_48556641的博客
02-15 576
resetSearch(formName) { this.$refs[formName].resetFields();//清空 this.getData();//查询 },
vue 回车查询第一次会清空查询条件
潇湘子的博客
07-12 817
vue 容易疏忽的问题,当form只有一个input 文本框回车查询，查询条件会被清空
vue 清空input标签 中file的值操作
10-15
主要介绍了vue 清空input标签 中file的值操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中input的v-model清空操作
10-16
主要介绍了vue中input的v-model清空操作，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
实现清空搜索框后展示所有列表内容
qq_42584734的博客
07-08 680
实现清空搜索框后展示所有列表内容
关于我是用element-plus+vue3页面自动刷新的趣事，element-plus+vue3方法自动执行
qq_40128591的博客
06-28 494
事情是这样的，在页面写了一段方法代码，并没有调用，但是每次进入都会自动调用。发现后还挺有趣的。原来是因为组件名称和方法名称一样，结果会自动调用，我也不知道为啥，哈哈哈。
ant design vue 自定义表头筛选，并一键清空
weixin_44617133的博客
07-06 1528
html: 使用filterDropdown自定义筛选，重写输入框发生变化的方法。js：通过filterValue控制各个表头筛选框内容。
刷新页面清空 input text的值
weixin_34194379的博客
12-27 479
2019独角兽企业重金招聘Python工程师标准>>> ...
[vue-cli]在使用vue-cli开发vue项目时，自动刷新页面的原理你了解吗？
歌谣的博客
01-15 1412
[vue-cli]在使用vue-cli开发vue项目时，自动刷新页面的原理你了解吗？ 自动刷新页面并不是vue-cli的功能，而是webpack的hot-module-replacement-plugin插件在做这件事，这个插件是webpack自带的插件，用来做hmr的。如果需要配置hmr只需要在webpack.config.js的devServer字段写 下面的配置即可。 { contentBase: 服务器可以访问的根目录, hot:true, //开启热模块替换也就是hmr hotOnly:true
vue-router 源码分析——2. router-link 组件是如何实现导航的
最新发布
miyagiSimple的博客
06-04 759
vue-router中 router-link 组件是如何实现导航的。recolve返回的对象里面的内容主要为location, route , href。location是标准化后的to，并且打上了标记表示已标准化，防止多次标准化，提升效率。route是通过遍历pathList和pathMap，利用正则表达式找到的和to匹配的路由对象，里面包含很多需要的内容。href在默认的hash模式下，会在to的前面加上#号，例如这里的’#/foo’。
vue自定义多选可搜索下拉框，不适用框架
05-11
可以使用Vue的自定义组件来实现一个多选可搜索下拉框，以下是一个简单的实现思路： 1. 创建一个Vue组件，并在模板中定义一个输入框和一个下拉框。 2. 当输入框中输入内容时，调用一个方法来过滤下拉框中的选项，并将过滤后的选项展示在下拉框中。 3. 当用户点击某个选项时，将其添加到已选列表中，同时清空输入框中的内容。 4. 当用户点击已选列表中的某个选项时，将其从已选列表中删除。 5. 在组件中定义一个属性，用于控制下拉框是否展示。 6. 当用户点击输入框时，将下拉框展示出来。 7. 当用户点击下拉框外的区域时，将下拉框隐藏起来。 具体实现可以参考以下代码： ```html <template> <div class="multiselect"> <div class="selected-items"> <div v-for="(item, index) in selectedItems" :key="index" class="selected-item"> {{ item }} <span @click="removeItem(index)">x</span> </div> </div> <input type="text" @click="showDropdown = true" v-model="searchText" placeholder="Search..."> <div class="dropdown" v-show="showDropdown"> <div v-for="(option, index) in filteredOptions" :key="index" @click="addItem(option)"> {{ option }} </div> </div> </div> </template> <script> export default { data() { return { options: ['Option 1', 'Option 2', 'Option 3', 'Option 4'], selectedItems: [], searchText: '', showDropdown: false } }, computed: { filteredOptions() { return this.options.filter(option => option.toLowerCase().includes(this.searchText.toLowerCase())) } }, methods: { addItem(item) { this.selectedItems.push(item) this.searchText = '' this.showDropdown = false }, removeItem(index) { this.selectedItems.splice(index, 1) } }, mounted() { document.addEventListener('click', (event) => { if (!this.$el.contains(event.target)) { this.showDropdown = false } }) } } </script> ``` 这个组件会根据用户输入的搜索关键词过滤下拉框中的选项，并将过滤后的选项展示在下拉框中。当用户点击某个选项时，该选项会被添加到已选列表中。当用户点击已选列表中的某个选项时，该选项会被从已选列表中删除。用户可以点击输入框来展开下拉框，也可以点击下拉框外的区域来收起下拉框。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

山顶的云彩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值