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=" ...
随机推荐
- 01:HTTP协议
软件开发架构 cs 客户端 服务端bs 浏览器 服务端ps:bs本质也是cs 浏览器窗口输入网址回车发生了几件事 """ 1 浏览器朝服务端发送请求 2 服务端接受请 ...
- 微信小程序电子签名实现
实现签名方法就是使用canvas <canvas canvas-id="firstCanvas" id='firstCanvas' bindtouchstart=" ...
- 精尽Spring Boot源码分析 - 序言
该系列文章是笔者在学习 Spring Boot 过程中总结下来的,里面涉及到相关源码,可能对读者不太友好,请结合我的源码注释 Spring Boot 源码分析 GitHub 地址 进行阅读 Sprin ...
- centos使用yum安装docker
1.先决条件 要安装 Docker 引擎,您需要 CentOS 7 或 8 的维护版本.不支持或测试存档版本. 该centos-extras库必须启用.默认情况下启用此存储库,但如果您已禁用它,则需要 ...
- 乘风破浪,Windows11设计和开发指导,全新图标字体和云母材质
Windows11全新的布局设计 Windows 11全新的布局设计已设计为支持现代应用体验.渐进的圆角.嵌套元素和一致的排水沟相结合,营造出柔和.平静.平易近人的效果,强调目的的统一和易用性. ht ...
- NoSql非关系型数据库之MongoDB应用(一):安装MongoDB服务
业精于勤,荒于嬉:行成于思,毁于随. 一.MongoDB服务下载安装(windows环境安装) 1.进入官网:https://www.mongodb.com/,点击右上角的 Try Free , 2 ...
- oracle sqlldr导入数据和导入去除空格
1.新建目录E:\load把需要导入的数据文件放到目录下面 这是我自己造的测试数据... 2.在文件下新建脚本文件 Load data infile 'E:\load\info.txt' into t ...
- centos 8.3安装 一键安装部署gitlab
安装和配置gitlab必须的依赖包 [root@gitlabdev ~]#dnf install -y curl policycoreutils openssh-server perl 设置开机自启s ...
- 在Xshell中文件内容显示乱码
1.修改系统语言 支持中文 echo $LANG 查看系统语言 默认 en_US.UFT_8 vim /etc/locale.conf 修改配置文件 将LANG的值改为 zh_CN.UT ...
- buu crypto 凯撒?替换?呵呵!
一. 以为是简单的凯撒加密,但是分析Ascill表,发现毫无规律,意味着要爆破出所有可能.只能用在线工具来弄了,脚本是不可能写的(狗头) 找到了,但是提交不成功,需要变成小写,用脚本转换一下,同时很坑 ...