vue实现动态筛选

Vue 实现动态筛选

使用计算属性实现动态筛选

在 Vue 中，可以利用计算属性（computed properties）根据用户输入动态筛选数据。计算属性会基于依赖的响应式数据自动更新，适合处理动态筛选逻辑。

<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: 'Cherry' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

使用 watch 实现复杂筛选

对于更复杂的筛选逻辑，可以使用 watch 监听输入变化并执行筛选操作。watch 适合处理异步操作或需要额外逻辑的筛选场景。

<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: 'Cherry' }
      ],
      filteredItems: []
    }
  },
  watch: {
    searchQuery(newVal) {
      this.filteredItems = this.items.filter(item =>
        item.name.toLowerCase().includes(newVal.toLowerCase())
      )
    }
  },
  created() {
    this.filteredItems = this.items
  }
}
</script>

多条件筛选

对于需要多个筛选条件的场景，可以结合多个输入字段和计算属性实现动态筛选。

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

<script>
export default {
  data() {
    return {
      searchQuery: '',
      categoryQuery: '',
      items: [
        { id: 1, name: 'Apple', category: 'Fruit' },
        { id: 2, name: 'Banana', category: 'Fruit' },
        { id: 3, name: 'Carrot', category: 'Vegetable' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        const nameMatch = item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
        const categoryMatch = item.category.toLowerCase().includes(this.categoryQuery.toLowerCase())
        return nameMatch && categoryMatch
      })
    }
  }
}
</script>

使用第三方库实现高级筛选

对于更复杂的筛选需求，可以集成第三方库如 lodash 的 _.filter 或 _.debounce 实现高性能筛选。

<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>
import _ from 'lodash'

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

服务器端筛选

对于大数据集，建议将筛选逻辑移至服务器端，通过 API 请求获取筛选后的数据。

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

<script>
import axios from 'axios'
import _ from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      filteredItems: []
    }
  },
  methods: {
    filterItems: _.debounce(function() {
      axios.get('/api/items', {
        params: {
          q: this.searchQuery
        }
      }).then(response => {
        this.filteredItems = response.data
      })
    }, 500)
  },
  created() {
    this.filterItems()
  }
}
</script>