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

最新推荐文章于 2023-03-06 09:31:43 发布
最新推荐文章于 2023-03-06 09:31:43 发布
阅读量4k 收藏 13
点赞数 3
分类专栏： vue.js 文章标签： 前端 javascript vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44774831/article/details/115319180
版权

问题场景：我们在搜索框中搜索完某用户(某商品)后，如何搜索框重新刷新用户列表(商品列表)?

解决办法：搜索框中添加一个"x"号，点击重新获取列表

搜索出某用户后
在这里插入图片描述
点击x号清除并重新获取列表
在这里插入图片描述

核心代码

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

代码示例

  <div class="search" style="text-align:center">
      <span>条件查询</span>
      <el-input v-model="searchName" placeholder="输入搜索值" style="width: 350px" clearable @clear="findUserByName(searchName)">
        <el-button slot="append" icon="el-icon-search" @click="findUserByName(searchName)"></el-button>
      </el-input>
    </div>
sing__star
关注
  • 3
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
在vue项目实现一个ctrl+f的搜索功能
10-15
- 可以考虑增加一个清除搜索结果的按钮，或者在搜索框清空时自动清除高亮。 - 如果页面内容很大，可以考虑使用虚拟滚动优化性能。 - 添加分页或懒加载，以减少一次性加载大量内容对性能的影响。 - 考虑添加模糊...
搜索框点击字体消失。滑出字体出现
05-31
在网页设计中，搜索框是用户交互的重要组成部分，它的用户体验直接影响到网站的可用性和用户满意度。"搜索框点击字体消失，滑出字体出现"是一种常见的交互设计方式，它旨在提高用户的输入体验，使得用户能够更清楚地...
解决：el-input添加clearable属性后出现2个×清除图标
qq_38969618的博客
06-06 3371
设置.el-input__validateIcon类样式为display: none
vue input输入框关键字筛选检索列表数据展示
10-16
主要为大家详细介绍了vue input输入框关键字筛选检索列表数据展示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue根据input框的值检索列表
weixin_44046781的博客
11-22 1356
vue根据input框的值检索列表 效果图 代码 <template> <div> <input type="text" v-model="search"> <ul> <!-- 注意！注意！注意！这里循环遍历的是items，不再是data里的list数组 --> <li v-for="(item,index)...
Vue--提交input后input清空
wangkuqi的博客
06-01 9932
这里我是在input绑定了一个enter按键事件，点击回车键input里面的文字提交。 点击回车键清空input里面的文字：在methods里面定义this.inputValue = " "
vue 清空input标签 中file的值操作
10-15
主要介绍了vue 清空input标签 中file的值操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【JavaScript源代码】vue3+typeScript穿梭框的实现示例.docx
12-29
在本文中，我们将探讨如何使用Vue3和TypeScript实现一个简单的穿梭框（Transfer）组件。穿梭框通常用于在两个列表之间转移元素，常用于数据筛选和分组操作。以下是实现这个功能的关键步骤和代码解析： 1. **HTML...
vue中input的v-model清空操作
12-08
问题来源 写input组件的时候需求一个清空按钮，但是如果直接修改prop中父级的传值会报错。但是如果不修改父级无法更新值，也会带来开发的问题。 解决 v-model 完成大部分数据双向绑定 <input type="text" :value="inputValue" @change="$emit('change',$event.target.value)" @blur="$emit('blur',$event.target.value)" @focus="$emit('focus',$event.target.value)" @input =
带清除按钮的输入框，可以点击清除按钮清空输入框
最新发布
07-10
在网页设计和开发中，`input`元素是HTML中最基本且重要的组成部分，它用于创建用户交互界面中的输入字段。在创建一个带清除按钮的输入框时，我们可以利用HTML5的一些特性，结合CSS和JavaScript来实现这个功能。这个...
[vue-cli]在使用vue-cli开发vue项目时，自动刷新页面的原理你了解吗？
歌谣的博客
01-15 1426
[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
实现清空搜索框后展示所有列表内容
qq_42584734的博客
07-08 704
实现清空搜索框后展示所有列表内容
23.Vue.列表过滤_input模糊搜索
weixin_45843676的博客
02-17 119
23.Vue列表过滤_input模糊搜索
vue进入页面刷新刷新一次或者多次
qq_44693047的博客
07-01 664
vue进入页面刷新一次或者多刺
vue3 实现点击加载刷新
把全世界的花都给一个人
03-05 1026
<template> <div> <button>{{num}}</button> <div class="joks"> <!-- 遍历笑话信息 --> <div class="jok" v-for="item in joks" :key="joks.docid">{{item.summary}} <hr > </div> <button @click=.
清除input输入框搜索记录
文龙刚的博客
03-06 768
【代码】清除input输入框搜索记录。
在清空搜索框值后页面不进行渲染，解决方法
除了好看啥也不会的博客
03-02 405
input搜索框需要清空时 <el-form-item label="设备:" class="margin-left"> <el-input size="small" v-model="filters.equipmentName" placeholder="设备" suffix-icon="el-icon-search" @focus="popupSelectEquipmen...
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> ``` 这个组件会根据用户输入的搜索关键词过滤下拉框中的选项，并将过滤后的选项展示在下拉框中。当用户点击某个选项时，该选项会被添加到已选列表中。当用户点击已选列表中的某个选项时，该选项会被从已选列表中删除。用户可以点击输入框来展开下拉框，也可以点击下拉框外的区域来收起下拉框。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值