<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. 01:HTTP协议

    软件开发架构 cs  客户端 服务端bs  浏览器 服务端ps:bs本质也是cs 浏览器窗口输入网址回车发生了几件事 """ 1 浏览器朝服务端发送请求 2 服务端接受请 ...

  2. 微信小程序电子签名实现

    实现签名方法就是使用canvas <canvas canvas-id="firstCanvas" id='firstCanvas' bindtouchstart=" ...

  3. 精尽Spring Boot源码分析 - 序言

    该系列文章是笔者在学习 Spring Boot 过程中总结下来的,里面涉及到相关源码,可能对读者不太友好,请结合我的源码注释 Spring Boot 源码分析 GitHub 地址 进行阅读 Sprin ...

  4. centos使用yum安装docker

    1.先决条件 要安装 Docker 引擎,您需要 CentOS 7 或 8 的维护版本.不支持或测试存档版本. 该centos-extras库必须启用.默认情况下启用此存储库,但如果您已禁用它,则需要 ...

  5. 乘风破浪,Windows11设计和开发指导,全新图标字体和云母材质

    Windows11全新的布局设计 Windows 11全新的布局设计已设计为支持现代应用体验.渐进的圆角.嵌套元素和一致的排水沟相结合,营造出柔和.平静.平易近人的效果,强调目的的统一和易用性. ht ...

  6. NoSql非关系型数据库之MongoDB应用(一):安装MongoDB服务

    业精于勤,荒于嬉:行成于思,毁于随. 一.MongoDB服务下载安装(windows环境安装) 1.进入官网:https://www.mongodb.com/,点击右上角的 Try Free  , 2 ...

  7. oracle sqlldr导入数据和导入去除空格

    1.新建目录E:\load把需要导入的数据文件放到目录下面 这是我自己造的测试数据... 2.在文件下新建脚本文件 Load data infile 'E:\load\info.txt' into t ...

  8. centos 8.3安装 一键安装部署gitlab

    安装和配置gitlab必须的依赖包 [root@gitlabdev ~]#dnf install -y curl policycoreutils openssh-server perl 设置开机自启s ...

  9. 在Xshell中文件内容显示乱码

    1.修改系统语言 支持中文 echo $LANG    查看系统语言  默认 en_US.UFT_8 vim /etc/locale.conf    修改配置文件 将LANG的值改为 zh_CN.UT ...

  10. buu crypto 凯撒?替换?呵呵!

    一. 以为是简单的凯撒加密,但是分析Ascill表,发现毫无规律,意味着要爆破出所有可能.只能用在线工具来弄了,脚本是不可能写的(狗头) 找到了,但是提交不成功,需要变成小写,用脚本转换一下,同时很坑 ...