当前位置：首页 > VUE

vue实现列表分类

2026-02-17 09:41:15VUE

Vue实现列表分类的方法

使用计算属性分类

通过计算属性对原始列表数据进行分类处理，返回分组后的数据。这种方法适用于静态或少量数据分类。

computed: {
  categorizedList() {
    const categories = {};
    this.originalList.forEach(item => {
      if (!categories[item.category]) {
        categories[item.category] = [];
      }
      categories[item.category].push(item);
    });
    return categories;
  }
}

使用v-for嵌套渲染

在模板中使用嵌套的v-for指令，先遍历分类，再遍历该分类下的项目。

<div v-for="(items, category) in categorizedList" :key="category">
  <h3>{{ category }}</h3>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</div>

动态分类筛选

结合输入框实现动态分类筛选功能，根据用户输入实时更新分类结果。

data() {
  return {
    searchQuery: '',
    originalList: [...]
  }
},
computed: {
  filteredList() {
    return this.originalList.filter(item => 
      item.category.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }
}

使用第三方库

对于复杂分类需求，可以考虑使用lodash的groupBy等方法简化分类逻辑。

import _ from 'lodash';

computed: {
  groupedList() {
    return _.groupBy(this.originalList, 'category');
  }
}

分类与排序结合

在分类的同时对每个分类下的项目进行排序，提升用户体验。

vue实现列表分类

computed: {
  sortedCategories() {
    const grouped = _.groupBy(this.originalList, 'category');
    Object.keys(grouped).forEach(category => {
      grouped[category].sort((a, b) => a.name.localeCompare(b.name));
    });
    return grouped;
  }
}