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

wxml

<template><div><div class="input-wrap"><el-inputsearchv-model="searchVal"placeholder="請輸入查詢內(nèi)容..."@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="學(xué)號"> </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模擬后臺返回的數(shù)據(jù)，賦值給該在頁面上顯示的數(shù)組},methods: {autosearch() {//當(dāng)用戶有輸入關(guān)鍵字時才過濾數(shù)據(jù)if (this.searchVal !== "") {//只篩選一個條件時可用以下兩條語句：// this.newList = this.dataList.filter( item => item.name.indexOf(this.searchVal) !== -1);// this.showList = this.newList;// 使用數(shù)組的filter方法將數(shù)組中含有搜索內(nèi)容的每個對象都返回給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的數(shù)據(jù)類型是number，//因此使用toString()方法先將對象中的學(xué)號轉(zhuǎn)為字符串再使用indexOf方法item.studentId.toString().indexOf(this.searchVal) !== -1);// 當(dāng)newList數(shù)據(jù)存在時，執(zhí)行以下語句，把 過濾完的數(shù)組 賦值給 應(yīng)該展示出來的數(shù)組if (this.newList) {this.showList = this.newList;}}},// 點擊重置按鈕后將input框置空，渲染展示初始數(shù)據(jù)resetDate() {this.searchVal = "";this.showList = this.dataList;}} }; </script>

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。