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

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>

總結

以上是生活随笔為你收集整理的微信小程序的搜索和重置功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。