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