<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. 玩转STM32MP157- 使用fbtft驱动 lcd ili9341

    之前使用了 fbtft 成功驱动了lcd st7735r,现在尝试下驱动 ili9341, 配置 跟之前用 fbtft 驱动 st7735r 一样,先用 make menuconfig 配置内核,添加 ...

  2. Tkinter 吐槽之二:Event 事件在子元素中共享

    背景 最近想简单粗暴的用 Python 写一个 GUI 的小程序.因为 Tkinter 是 Python 自带的 GUI 解决方案,为了部署方便,就直接选择了 Tkinter. 本来觉得 GUI 发展 ...

  3. GetModuleFileName函数的用法

    函数的功能 获取exe可执行文件的绝对路径. 用法 通过获取到exe的路径,可以获取到程序路径下(父路径或者子路径)的一些其它文件路径. 函数原型 DWORD WINAPI GetModuleFile ...

  4. js笔记16

    动画 (1)css样式提供了运动  过渡的属性transition 从一种情况到另一种情况叫过渡 transition:attr   time   linear   delay attr 是变化的属性 ...

  5. Linux mlocate源码分析:updatedb

    在Linux的文件查找命令中,mlocate提供的locate命令在单纯进行路径名名查找时有着显著的效率优势,因为mlocate预先对磁盘文件进行扫描并存储到一个数据库文件中,查找时只需要检索数据库而 ...

  6. [Django REST framework - 视图组件之视图基类、视图扩展类、视图子类、视图集]

    [Django REST framework - 视图组件之视图基类.视图扩展类.视图子类.视图集] 视图继承关系 详图见文章末尾 视图组件可点我查看 两个视图基类:APIView.GenericAP ...

  7. [源码解析] 深度学习分布式训练框架 horovod (11) --- on spark --- GLOO 方案

    [源码解析] 深度学习分布式训练框架 horovod (11) --- on spark --- GLOO 方案 目录 [源码解析] 深度学习分布式训练框架 horovod (11) --- on s ...

  8. 我用段子讲.NET之依赖注入其二

    <我用段子讲.NET之依赖注入其二> "随着我们将业务代码抽象化成接口和实现两部分,这也使得对象生命周期的统一管理成为可能.这就引发了第二个问题,.NET Core中的依赖注入框 ...

  9. Docker:DockerFile详解与实例

    基本结构 Dockerfile 由一行行命令语句组成,并且支持已 # 开头的注释行. 一般而言,Dockerfile 的内容分为四个部分: 基础镜像信息. 维护者信息. 镜像操作指令. 容器启动时执行 ...

  10. leetcode1047

    思路分析,这题是在栈分类的题目的,所以顺便复习下数据结构,先用java现成的,就当复习了. 1.判断栈顶和插入的元素是否相等,如果相等,那就出栈,不相等入栈结束 java版: