前端对列表数据的过滤

有时候搜索的操作是由前端负责完成的，下面是多条件搜索的demo代码
下面模拟了4种搜索条件

<template>
  <div id="filtration">
    姓名：<input type="text" v-model="searchData.name">
    年纪：<input type="text" v-model="searchData.age">
    性别：<select id="sex" v-model="searchData.sex">
    <option value="">所有</option>
    <option value="F">女</option>
    <option value="M">男</option>
  </select>
    年纪：<select id="grade" v-model="searchData.grade">
    <option value="">所有</option>
    <option value="高1">高1</option>
    <option value="高2">高2</option>
    <option value="高3">高3</option>
  </select>
    <button @click="doFilter">搜索</button>
    <ul v-for="(item, index) in list">
      <li>id:{{index}}--{{item}}}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "filtration",
    data() {
      return {
        searchData:{
          name:'',
          age:'',
          sex:'',
          grade:''
        },
        list: [
          {name: '小明', age: 18, sex: 'F', grade: '高1'},
          {name: '小红', age: 19, sex: 'F', grade: '高2'},
          {name: '小东', age: 19, sex: 'M', grade: '高2'},
          {name: '小酸', age: 18, sex: 'F', grade: '高1'},
          {name: '小天', age: 19, sex: 'M', grade: '高2'}
        ]
      }
    },
    methods:{
      doFilter(){
        let _this=this;
        function FilterFUN(FilterList,Filterkey){
          if(!_this.searchData[Filterkey]) return FilterList
          return FilterList.filter(item=>{ //利用数组的filter方法过滤并改变原来数组
            if((item[Filterkey]+'').indexOf(_this.searchData[Filterkey])!=-1){
              return item
            }
          });
        }
        let [...FilterList]=this.list//深度复制数组
        for(let Filterkey in _this.searchData ){
          FilterList=FilterFUN(FilterList,Filterkey);
        }
        console.log('FilterList',FilterList);
      },
    }
  }
</script>