uniapp的实时搜索框

用户输入搜索内容，实时显示根据关键字的查询结果。

本文的关键Vue属性是computed，还有vue的filter检索属性。

原表是这样的：

<uni-table ref="table" border stripe type="selection" empty-text="暂无更多数据" class="uniTable">
			<tr>
				<th width="50">序号</th>
				<th width="200" align="center">事&nbsp;&nbsp;项</th>
				<th width="60" align="center">申请人</th>
				<th width="" align="center">日&nbsp;&nbsp;期</th>
			</tr>
			<tr v-for="(item, index) in tableData" :key="index" @click="goDetail(item)">
				<td>{{item.id}}</td>
				<td>
					<div class="main">{{item.text}}</div>
				</td>
				<td>{{item.applicant}}</td>
				<td>{{item.date}}</td>
			</tr>
		</uni-table>

这里的{{tableData}}是通过http传值进来的。我们的目的是让用户在搜索框中输入用户名的关键字，实时展现搜索结果。

目前的搜索框是这样的：

<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input"
		@cancel="cancel" @clear="clear">
	</uni-search-bar>

这里我们已经用v-model=”{{searchValue}}"双向绑定了用户的输入内容，下面我们来写js部分。

computed: {
		filteredData() {
			const searchValue = this.searchValue
			if (!searchValue) {
				return this.tableData
			}
			return this.tableData.filter(item => {
				return item.applicant.includes(this.searchValue)
			})
		}
	},

此处，我们定义了一个用函数体内的searchValue变量获取到了外部的searchValue全局变量，我们启用了filteredData函数，如果searchValue为空，则返回原tableData的原表格内容。如果用户输入了关键字，那么我们就启用检索：this.tableData.filter（），我们要根据{{this.applicant}}进行检索，则item.applicant.includes（this.searchValue)，即搜索applicant中包含this.searchValue的数据项。

原tableData中的数据是都不用动的。

之后，我们修改原来html中，v-for遍历的部分：

<tr v-for="(item, index) in filteredData" :key="index" @click="goDetail(item)">

我们让v-for去遍历filteredData这个计算属性，而不是再遍历tableData这个原表。

完成，效果如期。