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=" ...
随机推荐
- 05:JS(01)
内容概要 JavaScript编程语言开头 数值类型 字符类型 布尔值 null与undefined 对象 数组 自定义对象 流程控制 函数 内置对象 时间对象 正则对象 JSON对象 BOM操作(j ...
- Redis源码解析之跳跃表(一)
跳跃表(skiplist) 有序集合(sorted set)是Redis中较为重要的一种数据结构,从名字上来看,我们可以知道它相比一般的集合多了一个有序.Redis的有序集合会要求我们给定一个分值(s ...
- csp-s模拟测试49(9.22)养花(分块/主席树)·折射(神仙DP)·画作
最近有点头晕........... T1 养花 考场我没想到正解,后来打的主席树,对于每个摸数查找1-(k-1),k-(2k-1)...的最大值,事实上还是很容易被卡的但是没有数据好像还比较友善, 对 ...
- VLAN协议与三层交换机 (Access/Trubk/Hrbrid)
VLAN协议与三层交换机(Access/Trunk/Hybrid) 目录 一.VLAN概述 1.1.分割广播域 1.2.VLAN的优势 1.3.静态VLAN 二.Trunk的作用 2.1.概念 2.2 ...
- ClickHouse源码笔记6:探究列式存储系统的排序
分析完成了聚合以及向量化过滤,向量化的函数计算之后.本篇,笔者将分析数据库的一个重要算子:排序.让我们从源码的角度来剖析ClickHouse作为列式存储系统是如何实现排序的. 本系列文章的源码分析基于 ...
- ceph-csi源码分析(3)-rbd driver-服务入口分析
更多ceph-csi其他源码分析,请查看下面这篇博文:kubernetes ceph-csi分析目录导航 ceph-csi源码分析(3)-rbd driver-服务入口分析 当ceph-csi组件启动 ...
- Kubernetes自动横向伸缩集群节点以及介绍PDB资源
在kubernetes中,有HPA在需要的时候创建更多的pod实例.但万一所有的节点都满了,放不下更多pod了,怎么办?显然这个问题并不局限于Autoscaler创建新pod实例的场景.即便是手动创建 ...
- 低代码开发LCDP,Power Apps系列 - 新建泰勒创新中心门户案例
低代码简介 上世纪八十年代,美国就有一些公司和实验室开始了可视化编程的研究,做出了4GL"第四代编程语言",到后来衍生成VPL"Visual Programming La ...
- 12-2 MySQL数据库备份(分表)
#!/bin/bash source /etc/profile DATE="$(date +%F_%H-%M-%S)" DB_IP="172.16.1.122" ...
- 10.8、mysql日志
mysql生成或相关联的日志文件种类繁多,这里重点关注与mysql数据库服务相关 的几类日志文件: 1.错误日志: 记录mysql服务进程mysql的在启动/关闭/运行过程中遇到的错误信息: [mys ...