<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. 基于 Spring Security 的前后端分离的权限控制系统

    话不多说,入正题.一个简单的权限控制系统需要考虑的问题如下: 权限如何加载 权限匹配规则 登录 1.  引入maven依赖 1 <?xml version="1.0" enc ...

  2. 云原生时代的Java

    原文链接(作者:周志明):https://time.geekbang.org/column/article/321185 公开课链接:https://time.geekbang.org/opencou ...

  3. 循序渐进BootstrapVue,开发公司门户网站(3)--- 结合邮件发送,收集用户反馈信息

    在我们公司门户网站里面,如果有需要,我们可以提供一个页面给用户反馈信息,以便获得宝贵的用户信息反馈或者一些产品咨询的记录,一般这个结合邮件发送到负责人的邮箱即可.本篇随笔结合后端发送邮件的操作,把相关 ...

  4. R的基本使用

    一.R的安装 1.进入R的官网,https://cran.r-project.org/ 2.下载对应的版 Downloaad R for Windows > base > Download ...

  5. Pun(PhotonUnityNetwork)

    介绍 Photon Unity Networking(首字母缩写 PUN)是一个 Unity 多人游戏插件包.它提供了身份验证选项.匹配,以及快速.可靠的通过我们的 Photon 后端实现的游戏内通信 ...

  6. Go基础语法0x01-数组

    数组 1.Go数组简介 数组是Go语言编程中最常用的数据结构之一.顾名思义,数组就是指一系列同一类型数据的集合.数组中包含的每个数据被称为数组元素(element),一个数组包含的元素个数被称为数组的 ...

  7. 1.QT多线程使用小结

    开头 一个进程可以有一个或更多线程同时运行.线程可以看做是"轻量级进程",进程完全由操作系统管理,线程即可以由操作系统管理,也可以由应用程序管理. Qt 使用QThread来管理线 ...

  8. 11、nginx+tomcat+redis_session共享

    11.1.前言: 1.多个tomcat要一起协同工作可以考虑的方案如下: (1)使用tomcat自带的cluster方式,多个tomcat间自动实时复制session信息,配置起来很简单.但这个方案的 ...

  9. oracle :如何测试数据库安装是否成功

    要测试数据安装是否成功,可按顺序执行以下两个步骤: 测试步骤 1:  请执行操作系统级的命令: tnsping orcl (如果出现[TNS-03505:无法解析名称]的提示错误: 那就改为tnspi ...

  10. Docker:Linux离线安装docker-17.03.2-ce,配置开机自启

    1. 准备docker离线包 docker官方离线包下载地址 下载需要安装的docker版本,我此次下载的是:docker-17.03.2-ce.tgz 2. 准备docker.service 系统配 ...