el-table实现纯前端查询功能
西瓜味的桃子 2024-07-07 17:33:02 阅读 55
<code>有时候后端返回了所有的数据，需要前端自己实现检索的功能，从网上看有很多方法，下面分享一个自己觉着好用的方法。
Element自带的筛选方法
<code><el-table
:data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"code>
style="width: 100%">code>
<el-table-column
label="Date"code>
prop="date">code>
</el-table-column>
<el-table-column
label="Name"code>
prop="name">code>
</el-table-column>
<el-table-column
align="right">code>
<template slot="header" slot-scope="scope">code>
<el-input
v-model="search"code>
size="mini"code>
placeholder="输入关键字搜索"/>code>
</template>
<template slot-scope="scope">code>
<el-button
size="mini"code>
@click="handleEdit(scope.$index, scope.row)">Edit</el-button>code>
<el-button
size="mini"code>
type="danger"code>
@click="handleDelete(scope.$index, scope.row)">Delete</el-button>code>
</template>
</el-table-column>
</el-table>
这段代码中，使用了 filter() 方法对 tableData 进行筛选。
第二个筛选方法
<template>
<div>
<el-input @input="search_input" v-model="search1"/>code>
<el-input @input="search_input" v-model="search2"/>code>
<el-table :data="typeList"></el-table>code>
</div>
</template>
<script>
export default{
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
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。