vue2 前端实现模糊查询过滤

简介

纯前端实现对一个list进行模糊过滤。

代码

html

<div
    v-for="(item,index) in tableList"
    :key="index"
    class="list-box-item cursorPointer"
	:class="currentId===item.workloadGroupId? 'active':''"
    @click="changeGroup(item)">
    <p>{{item.workloadGroupName}}</p>
</div>

js

 data() {
    return {
      drawer: false,
      searchValue: '',
      list: [],
      title: '', // 后端接口返回的所有数据
      currentId: ''
    }
  },
  computed: {
    // 前端过滤搜索
    tableList() {
      let search = this.searchValue ? this.searchValue : ''
      if (search) {
        search = search.toLowerCase() // 英文大写转小写
        return this.list.filter((item) => {
          return Object.keys(item).some((key) => {
            if (key === 'workloadGroupName') { // 只根据名称列搜索
              const name = String(item[key]).toLowerCase() // 英文大写转小写，indexOf方法严格区分大小写
              if (name.indexOf(search) > -1) {
                return true
              } else {
                return false
              }
            } else {
              return false
            }
          })
        })
      }
      return this.list
    }
  },

注意

在computed中不要使用箭头函数，否则会报错，因为我们需要引用到data中的数据，要用this引用。