vue中实现筛选框

Vue 中实现筛选框的方法

基础数据绑定实现

在 Vue 中可以通过 v-model 实现筛选框的基础功能。创建一个数据属性存储筛选条件，通过计算属性过滤列表数据。

<template>
  <div>
    <input v-model="filterText" placeholder="输入筛选条件">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filterText: '',
      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.filterText.toLowerCase())
      )
    }
  }
}
</script>

多条件筛选实现

对于更复杂的多条件筛选，可以使用对象存储多个筛选条件。

<template>
  <div>
    <input v-model="filters.name" placeholder="名称">
    <input v-model="filters.category" placeholder="类别">
    <select v-model="filters.status">
      <option value="">全部</option>
      <option value="active">活跃</option>
      <option value="inactive">非活跃</option>
    </select>

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

<script>
export default {
  data() {
    return {
      filters: {
        name: '',
        category: '',
        status: ''
      },
      items: [
        { id: 1, name: 'Apple', category: 'Fruit', status: 'active' },
        { id: 2, name: 'Carrot', category: 'Vegetable', status: 'inactive' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        return (
          item.name.toLowerCase().includes(this.filters.name.toLowerCase()) &&
          item.category.toLowerCase().includes(this.filters.category.toLowerCase()) &&
          (this.filters.status === '' || item.status === this.filters.status)
        )
      })
    }
  }
}
</script>

使用第三方组件实现

对于更高级的筛选需求，可以考虑使用第三方组件如 vue-multiselect。

安装依赖：

npm install vue-multiselect

使用示例：

<template>
  <div>
    <multiselect
      v-model="selectedOptions"
      :options="options"
      :multiple="true"
      :close-on-select="false"
      placeholder="选择筛选条件"
    ></multiselect>

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

<script>
import Multiselect from 'vue-multiselect'

export default {
  components: { Multiselect },
  data() {
    return {
      selectedOptions: [],
      options: ['Option 1', 'Option 2', 'Option 3'],
      items: [
        { id: 1, name: 'Item 1', category: 'Option 1' },
        { id: 2, name: 'Item 2', category: 'Option 2' }
      ]
    }
  },
  computed: {
    filteredItems() {
      if (this.selectedOptions.length === 0) return this.items
      return this.items.filter(item =>
        this.selectedOptions.includes(item.category)
      )
    }
  }
}
</script>

筛选框样式优化

可以通过 CSS 为筛选框添加更好的视觉效果。

.filter-container {
  margin-bottom: 20px;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 4px;
}

.filter-input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 10px;
}

.filter-select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

性能优化技巧

对于大型数据集，可以使用防抖技术减少计算属性的频繁计算。

import { debounce } from 'lodash'

export default {
  data() {
    return {
      filterText: '',
      items: [...大型数据集...]
    }
  },
  computed: {
    filteredItems: debounce(function() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.filterText.toLowerCase())
      )
    }, 300)
  }
}

这些方法涵盖了从基础到高级的筛选框实现方式，可以根据具体需求选择合适的实现方案。