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

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

Element自带的筛选方法

<el-table
    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%">
    <el-table-column
      label="Date"
      prop="date">
    </el-table-column>
    <el-table-column
      label="Name"
      prop="name">
    </el-table-column>
    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button
          size="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>
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