微信小程序的搜索和重置功能

wxml

<template><div><div class="input-wrap"><el-inputsearchv-model="searchVal"placeholder="请输入查询内容..."@input="autosearch"style="width: auto"></el-input><el-button type="dashed" class="reset" @click="resetDate">重置</el-button></div><br /><el-table border :data="showList"><el-table-column prop="date" label="报名日期"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="studentId" label="学号"> </el-table-column><el-table-column prop="email" label="邮箱"> </el-table-column></el-table></div>
</template>

js

<script>
export default {data() {return {searchVal: "",showList: [],newList: [],dataList: [{date: "2019-09-26",name: "刘邦",studentId: 2016127206,email: "839170766@qq.com"},{date: "2018-09-26",name: "韩信",studentId: 2016127206,email: "839170766@qq.com"},{date: "2017-09-26",name: "项羽",studentId: 2016127206,email: "839170766@qq.com"},{date: "2015-09-26",name: "周盖",studentId: 2016127206,email: "839170766@qq.com"},{date: "2019-09-26",name: "黄瑜",studentId: 2016127207,email: "839170766@qq.com"},{date: "2019-09-26",name: "刘邦",studentId: 2016127208,email: "839170766@qq.com"},{date: "2019-09-26",name: "项羽",studentId: 2016127206,email: "aaa@163.com"},{date: "2019-09-26",name: "刘邦",studentId: 2016127206,email: "xxx@189.com"}]};},mounted() {this.showList = this.dataList; //用dataList模拟后台返回的数据，赋值给该在页面上显示的数组},methods: {autosearch() {//当用户有输入关键字时才过滤数据if (this.searchVal !== "") {//只筛选一个条件时可用以下两条语句：// this.newList = this.dataList.filter( item => item.name.indexOf(this.searchVal) !== -1);// this.showList = this.newList;// 使用数组的filter方法将数组中含有搜索内容的每个对象都返回给newList存储this.newList = this.dataList.filter(item =>item.email.indexOf(this.searchVal) !== -1 ||item.date.indexOf(this.searchVal) !== -1 ||item.name.indexOf(this.searchVal) !== -1 ||// 由于indexOf方法返回的是字符在字符串中所在的索引值，而studentId的数据类型是number，//因此使用toString()方法先将对象中的学号转为字符串再使用indexOf方法item.studentId.toString().indexOf(this.searchVal) !== -1);// 当newList数据存在时，执行以下语句，把 过滤完的数组 赋值给 应该展示出来的数组if (this.newList) {this.showList = this.newList;}}},// 点击重置按钮后将input框置空，渲染展示初始数据resetDate() {this.searchVal = "";this.showList = this.dataList;}}
};
</script>

微信小程序的搜索和重置功能相关推荐

怎么实现微信小程序云开发拼团功能？
[微信云开发教程]怎么实现微信小程序云开发拼团功能? 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录 [微 ...
微信小程序—调用扫一扫功能，通过扫描二维码连接蓝牙模块
使用微信小程序的扫码功能连接蓝牙,具体操作如下实现流程图 Created with Raphaël 2.2.0准备好二维码小程序调用扫码功能小程序获取到二维码内容(我这里为蓝牙的名字)小程序通过搜索 ...
原生微信小程序，搜索框（search）组件
原生微信小程序,搜索框(search)组件首先创建组件及两个跳转页面,第一个是搜索框所在的页面(首页),第二个是搜索详细页搜索框的本质是:搜索框不是input,而是navigate,跳转到专门的搜 ...
微信小程序 - 实现左滑动删除功能
微信小程序 - 实现左滑动删除功能效果图: 实现过程: 一.wxml布局这里我是先用了一个大盒子包裹小盒子,然后小盒子里面进行左右布局(左边为内容部分,右边为删除按钮)的方式实现的 <vie ...
微信小程序购物车数量加减功能
微信小程序购物车数量加减功能 wxml  <view class="stepper">  < ...
微信小程序页面搜索框查询（无后台接口情况下）
微信小程序页面搜索框查询(无后台接口情况下) 效果图: wxml <view class="container"><view class="goodsl ...
基于微信小程序的用户列表点赞功能
代码地址如下: http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4. ...
微信小程序微信小程序地图搜索、地图搜索点点击出callout气泡标题说明
实现效果:根据楼盘名称实现地图定位.周边搜索: 代码: html <view class="mapinfo"><view class="mapbd&qu ...
【愚公系列】2022年09月微信小程序-微信小程序实现网页一键登录功能
文章目录前言一.微信小程序实现网页一键登录功能 1.旧版登录方法 2.新版登录方法二.相关第三方包源码前言如果微信小程序要获取微信登录的用户信息,需要拿到code去后台换取用户信息,具体步骤 ...

微信小程序的搜索和重置功能

微信小程序的搜索和重置功能

wxml

js

微信小程序的搜索和重置功能相关推荐

最新文章

热门文章