<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-- 利用过滤-实现搜索框的姓名的搜索的更多相关文章

  1. bootstrap制作搜索框及添加回车搜索事件

    下面是开发中用bootstrap制作的一个搜索框,以及给搜索框添加回车搜索事件的一个小案例. bootstrap制作搜索框及添加回车搜索事件 下面是功能实现的代码: <!DOCTYPE html ...

  2. 使用jQuery和CSS3生成的搜索框变形全屏搜索效果

    在线演示 本地下载 使用jQuery和CSS3过渡变形效果生成的一个搜索框变形效果实现,可以帮助你更好利用页面格式和内容.实验性质的代码,请大家在产品环境里自己修改使用!

  3. js搜索框 js仿百度搜索 js下拉框 jQuery.Autocomplete使用

    做了一个网站,需要根据文本框的输入模糊搜索数据库内容给出提示供用户选择,就找到了jQuery.Autocomplete 效果如下图: 该插件托管在github上,具体地址:https://github ...

  4. 搜索框中“请输入搜索keyword”

    $(function(){    $("#ctl00_txtKey").val("请输入搜索keyword").addClass("search&qu ...

  5. input搜索框实时检索功能实现(超简单,核心原理请看思路即可)

    问题:实现input搜索框实时检索的功能,类似哔哩哔哩首页搜索功能(壮哉我大b站!).公司要求,emmmm没办法,果然懒人是要被赶着走才会进步的说,诶嘿O(∩_∩)O. 解决方法: 1.参考资料:ht ...

  6. Android 浮动搜索框 searchable 使用(转)。

    Android为程序的搜索功能提供了统一的搜索接口,search dialog和search widget,这里介绍search dialog使用.search dialog 只能为于activity ...

  7. Qt之自定义搜索框

    简述 关于搜索框,大家都经常接触.例如:浏览器搜索.Windows资源管理器搜索等. 当然,这些对于Qt实现来说毫无压力,只要思路清晰,分分钟搞定. 方案一:调用QLineEdit现有接口 void ...

  8. 【Qt】Qt之自定义搜索框【转】

    简述 关于搜索框,大家都经常接触.例如:浏览器搜索.Windows资源管理器搜索等. 当然,这些对于Qt实现来说毫无压力,只要思路清晰,分分钟搞定. 简述 效果 细节分析 Coding 源码下载 效果 ...

  9. Android 系统搜索框(有浏览记录)

    实现Android 系统搜索框(有浏览记录),先看下效果: 一.配置搜索描述文件  要在res中的xml文件加创建sreachable.xml,内容如下: <?xml version=" ...

随机推荐

  1. huge page 能给MySQL 带来性能提升吗?

    最近一直在做性能压测相关的事情,有公众号的读者朋友咨询有赞的数据库服务器有没有开启huge page,我听说过huge page会对性能有所提升,本文就一探究竟.对过程没有兴趣的可以直接看结论. 二 ...

  2. 【题解】codeforces 8c Looking for Order 状压dp

    题目描述 Lena喜欢秩序井然的生活.一天,她要去上大学了.突然,她发现整个房间乱糟糟的--她的手提包里的物品都散落在了地上.她想把所有的物品都放回她的手提包.但是,这里有一点问题:她一次最多只能拿两 ...

  3. Golang学习(用代码来学习) - 第五篇

    /** 并发控制:context的学习 */ func context_test() { PrintStartSeperator("context_test") ctx, canc ...

  4. 《吃透微服务》 - 服务容错之Sentinel

    大家好,我是小菜. 一个希望能够成为 吹着牛X谈架构 的男人!如果你也想成为我想成为的人,不然点个关注做个伴,让小菜不再孤单! 本文主要介绍 SpringCloud中Sentinel 如有需要,可以参 ...

  5. Android集合中对象排序

    如果将集合中的对象进行排序,最近使用了一个简单的方法解决了,随笔记下来. 主要思路: 首先,新建类实现Comparator<?>,这个类是做比较的关键类,一般做比较的类型 int 或 St ...

  6. 关于equals()和hashcode()的一些约定

    本文章主要讨论和回答一下几个问题: equals()的四大特性 equals()和hashcode()之间的关系,为什么我们经常说这两个方法要么都重写,要么都不重写? HashMap.HashSet等 ...

  7. SpringCloud-OAuth2(四):改造篇

    本片主要讲SpringCloud Oauth2篇的实战改造,如动态权限.集成JWT.更改默认url.数据库加载client信息等改造. 同时,这应该也是我这系列博客的完结篇. 关于Oauth2,我也想 ...

  8. 高性能的Redis之对象底层实现原理详解

    对象 在前面的数个章节里, 我们陆续介绍了 Redis 用到的所有主要数据结构, 比如简单动态字符串(SDS).双端链表.字典.压缩列表.整数集合, 等等. Redis 并没有直接使用这些数据结构来实 ...

  9. OSPF路由协议

    一.OSPF的工作过程 二.OSPF的基本概念 三.DR与BDR 四.OSPF数据包类型 五.OSPF邻接关系的建立 六.OSPF的路由器类型 一.OSPF的工作过程 OSPF路由协议针对每一个区域分 ...

  10. 10、ssh中scp、sftp程序详解

    每次都是全量拷贝,rsync是增量拷贝 10.1.scp的基本用法: -r:拷贝目录; -p: 保持属性: -l:限速设置; scp -P52113 /etc/hosts lc@172.16.1.41 ...