vue-- 利用过滤-实现搜索框的姓名的搜索
<div class="fl w-200 m-l-30">
<el-input placeholder="输入用户名" v-model="searchData">
<el-button slot="append" icon="el-icon-search" @click="search()">搜索</el-button>
</el-input>
</div> --------------------------------
export default {
data() {
return {
tableData: [],
dataCount: null,
currentPage: null,
realname: '',
multipleSelection: [], page_size:7,
currentpagezyt:1,
list:[],
total:null, //和:total对应
searchData: "",
}
},
methods: {
search() {
this.page=1;
this.getList();
},
-------------------------
//处理数据
getList() {
//es6过滤得到满足搜索条件的展示数据list
let list = this.tableData.filter((item, index) =>
item.userName.includes(this.searchData)
)//取每一个item,看看item的userName属性equal(input内的searchData) this.list = list.filter((item, index) =>
index < this.page * this.limit && index >= this.limit * (this.page - 1)
)
this.total = list.length
},
vue-- 利用过滤-实现搜索框的姓名的搜索的更多相关文章
- bootstrap制作搜索框及添加回车搜索事件
下面是开发中用bootstrap制作的一个搜索框,以及给搜索框添加回车搜索事件的一个小案例. bootstrap制作搜索框及添加回车搜索事件 下面是功能实现的代码: <!DOCTYPE html ...
- 使用jQuery和CSS3生成的搜索框变形全屏搜索效果
在线演示 本地下载 使用jQuery和CSS3过渡变形效果生成的一个搜索框变形效果实现,可以帮助你更好利用页面格式和内容.实验性质的代码,请大家在产品环境里自己修改使用!
- js搜索框 js仿百度搜索 js下拉框 jQuery.Autocomplete使用
做了一个网站,需要根据文本框的输入模糊搜索数据库内容给出提示供用户选择,就找到了jQuery.Autocomplete 效果如下图: 该插件托管在github上,具体地址:https://github ...
- 搜索框中“请输入搜索keyword”
$(function(){ $("#ctl00_txtKey").val("请输入搜索keyword").addClass("search&qu ...
- input搜索框实时检索功能实现(超简单,核心原理请看思路即可)
问题:实现input搜索框实时检索的功能,类似哔哩哔哩首页搜索功能(壮哉我大b站!).公司要求,emmmm没办法,果然懒人是要被赶着走才会进步的说,诶嘿O(∩_∩)O. 解决方法: 1.参考资料:ht ...
- Android 浮动搜索框 searchable 使用(转)。
Android为程序的搜索功能提供了统一的搜索接口,search dialog和search widget,这里介绍search dialog使用.search dialog 只能为于activity ...
- Qt之自定义搜索框
简述 关于搜索框,大家都经常接触.例如:浏览器搜索.Windows资源管理器搜索等. 当然,这些对于Qt实现来说毫无压力,只要思路清晰,分分钟搞定. 方案一:调用QLineEdit现有接口 void ...
- 【Qt】Qt之自定义搜索框【转】
简述 关于搜索框,大家都经常接触.例如:浏览器搜索.Windows资源管理器搜索等. 当然,这些对于Qt实现来说毫无压力,只要思路清晰,分分钟搞定. 简述 效果 细节分析 Coding 源码下载 效果 ...
- Android 系统搜索框(有浏览记录)
实现Android 系统搜索框(有浏览记录),先看下效果: 一.配置搜索描述文件 要在res中的xml文件加创建sreachable.xml,内容如下: <?xml version=" ...
随机推荐
- 小白学k8s(9)-gitlab-runner实现go项目的自动化发布
gitlab构建CI/CD 准备 docker部署gitlab 使用二进制部署gitlab-runner gitlab-runner注册 配置Variables 简单先来个测试 开始构建 遇到的报错 ...
- Scala语言笔记 - 第三篇(容器方法篇)
Scala语言笔记 - 第三篇(容器方法篇) 目录 Scala语言笔记 - 第三篇(容器方法篇) map和flapMap方法: 最近研究了下scala语言,这个语言最强大的就是它强大的函数式编程( ...
- 基于ILI9341的TFT液晶显示模组LCM240320详解(1)
Hello,大家好,今天我们来讨论当下非常流行的TFT液晶显示模组,它最大的特点是可以显示出效果非常好的彩色信息,绝大多数手机.液晶显示器,液晶电视.MID.MP4等产品都在使用它,你想抗拒它的魅力还 ...
- .net core AES加密解密及RSA 签名验签
引用 using Org.BouncyCastle.Crypto.Parameters; using Org.BouncyCastle.Security; using System; using Sy ...
- 堆和栈的内存分布&一些关于内存泄露、栈溢出和野指针的内容(头秃
内存泄漏&栈溢出 C++中,我们主要涉及的内存是栈和堆, 堆 (By programmer) 申请后由程序员主动释放,遗忘后果严重: 栈 (By compiler)需要时由编译器分配,在不需 ...
- mysql_my.cnf文件详解
以下是 my.cnf 配置文件参数解释:#*** client options 相关选项 ***##以下选项会被MySQL客户端应用读取.注意只有MySQL附带的客户端应用程序保证可以读取这段内容.如 ...
- 14、CentOS7安装过程中,磁盘大于2T的报错处理
问题描述 服务器磁盘单盘空间大于2TB,在安装CentOS7时出现下图报错: Boot failure.Reboot and Select proper Boot device... 问题原因: 安装 ...
- [HNOI2006]公路修建问题题解
题目 题目描述 OI island是一个非常漂亮的岛屿,自开发以来,到这儿来旅游的人很多.然而,由于该岛屿刚刚开发不久,所以那里的交通情况还是很糟糕.所以,OIER Association组织成立了, ...
- 2013年第四届蓝桥杯C/C++程序设计本科B组省赛 第39级台阶
题目描述: 第39级台阶 小明刚刚看完电影<第39级台阶>,离开电影院的时候,他数了数礼堂前的台阶数,恰好是39级! 站在台阶前,他突然又想着一个问题: 如果我每一步只能迈上1个或2个台阶 ...
- sublime最全笔记
sublime骨架建立 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8&quo ...