vue查询功能实现

Vue 查询功能实现方法

基本搜索功能实现

在 Vue 中实现查询功能通常需要结合 v-model 和计算属性。创建一个搜索输入框，使用 v-model 绑定搜索关键词，通过计算属性过滤数据列表。

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search...">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

使用 Lodash 防抖优化性能

对于大型数据集或频繁输入的搜索，可以使用 Lodash 的防抖功能来优化性能，减少不必要的计算。

import { debounce } from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      items: [...],
      debouncedFilter: null
    }
  },
  created() {
    this.debouncedFilter = debounce(this.filterItems, 300)
  },
  methods: {
    filterItems() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  },
  computed: {
    filteredItems() {
      return this.debouncedFilter()
    }
  }
}

服务端搜索实现

当数据量很大时，应该考虑服务端搜索。通过 API 调用将搜索词发送到后端，返回过滤后的结果。

export default {
  data() {
    return {
      searchQuery: '',
      items: [],
      isLoading: false
    }
  },
  watch: {
    searchQuery(newVal) {
      this.fetchSearchResults(newVal)
    }
  },
  methods: {
    async fetchSearchResults(query) {
      this.isLoading = true
      try {
        const response = await axios.get('/api/search', {
          params: { q: query }
        })
        this.items = response.data
      } catch (error) {
        console.error(error)
      } finally {
        this.isLoading = false
      }
    }
  }
}

高级搜索功能

实现多条件搜索可以创建一个搜索对象，包含多个过滤条件，然后组合这些条件进行过滤。

export default {
  data() {
    return {
      searchOptions: {
        name: '',
        category: '',
        priceRange: [0, 100]
      },
      items: [...]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        const nameMatch = item.name.toLowerCase().includes(
          this.searchOptions.name.toLowerCase()
        )
        const categoryMatch = this.searchOptions.category === '' || 
          item.category === this.searchOptions.category
        const priceMatch = item.price >= this.searchOptions.priceRange[0] && 
          item.price <= this.searchOptions.priceRange[1]

        return nameMatch && categoryMatch && priceMatch
      })
    }
  }
}

使用 Vuex 管理搜索状态

在大型应用中，可以使用 Vuex 集中管理搜索状态和逻辑。

// store.js
export default new Vuex.Store({
  state: {
    searchQuery: '',
    items: [...]
  },
  getters: {
    filteredItems: state => {
      return state.items.filter(item =>
        item.name.toLowerCase().includes(state.searchQuery.toLowerCase())
      )
    }
  },
  mutations: {
    updateSearchQuery(state, query) {
      state.searchQuery = query
    }
  }
})

// 组件中使用
export default {
  computed: {
    ...mapGetters(['filteredItems']),
    searchQuery: {
      get() {
        return this.$store.state.searchQuery
      },
      set(value) {
        this.$store.commit('updateSearchQuery', value)
      }
    }
  }
}

以上方法可以根据具体需求选择或组合使用，从简单的前端过滤到复杂的服务端搜索，都能在 Vue 中有效实现查询功能。