前端模糊查询

一般情况下，模糊查询是通过调用后台接口实现的，今天我在项目中，尝试了一下简单的前端模糊查询。

<el-button class="billButton" type="primary" @click="filterShow">筛选</el-button>

<!--筛选弹出框-->
<el-dialog :visible.sync="dialogTableVisible" style="text-align: center;">
			
	<el-input v-model="filterData" style=" 80%;"></el-input>
		<el-table  :data="passTable"  border>			
			<el-table-column label="串码" width="150" prop="QMNO" sortable></el-table-column>
			<el-table-column label="校验结果" prop="checkMessage"></el-table-column>			
		</el-table>
	
		<span slot="footer" class="dialog-footer">
			 <el-button @click="dialogTableVisible = false">取消</el-button>
			 <el-button type="primary"  @click="filterHandler">确定</el-button>
		</span>
</el-dialog>


//筛选
 filterShow(){
	this.filterData = ''
	this.dialogTableVisible = true		    	
},
//筛选确定
filterHandler(){
	this.dialogTableVisible = false
	var len = this.passTable.length;
	var reg = new RegExp(this.filterData);
	this.passTable.map(item=>{
		//如果字符串中不包含目标字符会返回-1
		 if(item.checkMessage.match(reg)){
			this.passTable2.push(item);
		 }
	})
	this.passTable = this.passTable2
},