el-table实现纯前端查询功能

    有时候后端返回了所有的数据，需要前端自己实现检索的功能，从网上看有很多方法，下面分享一个自己觉着好用的方法。

Element自带的筛选方法

<el-table:data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"style="width: 100%"><el-table-columnlabel="Date"prop="date"></el-table-column><el-table-columnlabel="Name"prop="name"></el-table-column><el-table-columnalign="right"><templateslot="header"slot-scope="scope"><el-inputv-model="search"size="mini"placeholder="输入关键字搜索"/></template><templateslot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index, scope.row)">Edit</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index, scope.row)">Delete</el-button></template></el-table-column></el-table>

这段代码中，使用了 filter() 方法对 tableData 进行筛选。

第二个筛选方法

<template><div><el-input@input="search_input"v-model="search1"/><el-input@input="search_input"v-model="search2"/><el-table:data="typeList"></el-table></div></template><script>exportdefault{data(){return{typeList:[{id:1,name:'张三',age:10},{id:2,name:'李四',age:20},{id:3,name:'王五',age:30},],search1:'',search2:''}},methods:{search_input(){//通过name和age字段进行筛选this.typeList=this.typeList
             .filter(data=>!this.search1|| data.name.toLowerCase().includes(this.search1.toLowerCase())).filter(data=>!this.search2||String(data.age).toLowerCase().includes(String(this.search2).toLowerCase()))}}//注意：如果value值的类型不是string要先转成string}</script>

原文链接：https://blog.csdn.net/qq_53986004/article/details/132316987