前端实现模糊搜索功能

1.首先在父组件插入子组件传递数据(如果你不需要传递数据这步可以省略)

 <!-- 主体内容 -->
 <earlyControlData :commonlyData="immediacyData" />

2.在子组件通过props接收到数据

  props: {
    commonlyData: {
      type: Array,
      default: function() {
        return []
      }
    }
  }

3.watch监听一下父组件来的数据不能直接修改

 //监听器
  watch: {
    commonlyData(val) {
      this.dataSearch = val//在此备份一下,渲染使用这个数据不要直接使用父的数据
    }
  }

4.实现模糊搜索功能(我是通过父组件数据中的两项数据进行搜索)--关键代码

  onSearch() {
      //实现搜索
      this.dataSearch = this.commonlyData.filter(p => {
        return (
          p.f_jcdmc.indexOf(this.searchValue) !== -1 ||
          p.f_jcd_gjbh.indexOf(this.searchValue) !== -1
        )
      })
    }