vue实现多条件搜索

Vue 实现多条件搜索

在 Vue 中实现多条件搜索通常涉及以下几个步骤：

数据绑定

使用 v-model 将输入框与 Vue 实例中的数据属性绑定，确保用户输入能够实时更新到数据模型中。例如，可以绑定多个输入框到不同的搜索条件。

<template>
  <div>
    <input v-model="searchQuery.name" placeholder="按名称搜索" />
    <input v-model="searchQuery.category" placeholder="按分类搜索" />
    <input v-model="searchQuery.price" placeholder="按价格搜索" />
  </div>
</template>

计算属性

通过计算属性对数据进行过滤。计算属性会根据依赖的数据自动更新，非常适合用于动态搜索场景。

<script>
export default {
  data() {
    return {
      searchQuery: {
        name: '',
        category: '',
        price: ''
      },
      items: [
        { name: '商品1', category: '电子产品', price: 100 },
        { name: '商品2', category: '家居用品', price: 50 },
        { name: '商品3', category: '电子产品', price: 200 }
      ]
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        return (
          item.name.toLowerCase().includes(this.searchQuery.name.toLowerCase()) &&
          item.category.toLowerCase().includes(this.searchQuery.category.toLowerCase()) &&
          (this.searchQuery.price === '' || item.price <= parseInt(this.searchQuery.price))
        );
      });
    }
  }
};
</script>

显示结果

将过滤后的数据渲染到页面上，通常使用 v-for 指令遍历计算属性返回的结果。

<template>
  <div>
    <ul>
      <li v-for="item in filteredItems" :key="item.name">
        {{ item.name }} - {{ item.category }} - {{ item.price }}
      </li>
    </ul>
  </div>
</template>

优化性能

对于大型数据集，可以通过防抖（debounce）技术减少计算属性的频繁调用。可以使用 Lodash 的 _.debounce 方法实现。

import _ from 'lodash';

export default {
  methods: {
    debouncedSearch: _.debounce(function() {
      this.filteredItems = this.items.filter(item => {
        return (
          item.name.toLowerCase().includes(this.searchQuery.name.toLowerCase()) &&
          item.category.toLowerCase().includes(this.searchQuery.category.toLowerCase()) &&
          (this.searchQuery.price === '' || item.price <= parseInt(this.searchQuery.price))
        );
      });
    }, 300)
  },
  watch: {
    searchQuery: {
      handler() {
        this.debouncedSearch();
      },
      deep: true
    }
  }
};

使用第三方库

如果需要更复杂的搜索功能，可以考虑使用第三方库如 Fuse.js 实现模糊搜索。Fuse.js 支持模糊匹配、权重设置等高级功能。

import Fuse from 'fuse.js';

export default {
  data() {
    return {
      fuse: null,
      searchQuery: '',
      items: [
        { name: '商品1', category: '电子产品', price: 100 },
        { name: '商品2', category: '家居用品', price: 50 },
        { name: '商品3', category: '电子产品', price: 200 }
      ]
    };
  },
  mounted() {
    this.fuse = new Fuse(this.items, {
      keys: ['name', 'category', 'price'],
      threshold: 0.4
    });
  },
  computed: {
    filteredItems() {
      if (this.searchQuery.trim() === '') {
        return this.items;
      }
      return this.fuse.search(this.searchQuery).map(result => result.item);
    }
  }
};

后端搜索

对于大型数据集，可以将搜索条件发送到后端处理，通过 API 返回结果。使用 Axios 发送请求并更新数据。

import axios from 'axios';

export default {
  methods: {
    searchItems() {
      axios.get('/api/items', { params: this.searchQuery })
        .then(response => {
          this.filteredItems = response.data;
        });
    }
  },
  watch: {
    searchQuery: {
      handler() {
        this.searchItems();
      },
      deep: true
    }
  }
};

通过以上方法，可以灵活地在 Vue 中实现多条件搜索功能，适应不同场景的需求。