vue实现列表分类

Vue 实现列表分类的方法

使用计算属性分类

通过计算属性对原始数组进行分类处理，返回分组后的对象或数组。适合静态数据或较少变动的场景。

computed: {
  groupedItems() {
    return this.items.reduce((groups, item) => {
      const category = item.category;
      if (!groups[category]) {
        groups[category] = [];
      }
      groups[category].push(item);
      return groups;
    }, {});
  }
}

模板中使用 v-for 嵌套渲染：

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

使用过滤器方法

创建分类方法在模板中直接调用，灵活性更高，适合需要动态分类的场景。

methods: {
  filterByCategory(category) {
    return this.items.filter(item => item.category === category);
  }
}

模板调用示例：

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

使用第三方库

借助 lodash 的 groupBy 实现快速分类：

import _ from 'lodash';
computed: {
  groupedItems() {
    return _.groupBy(this.items, 'category');
  }
}

动态分类组件

创建可复用的分类组件，通过插槽分发内容：

Vue.component('category-list', {
  props: ['items', 'categoryKey'],
  template: `
    <div>
      <div v-for="(group, category) in groupedItems" :key="category">
        <slot name="header" :category="category"></slot>
        <slot name="body" :group="group"></slot>
      </div>
    </div>
  `,
  computed: {
    groupedItems() {
      return _.groupBy(this.items, this.categoryKey);
    }
  }
});

使用示例：

<category-list :items="products" category-key="type">
  <template v-slot:header="{ category }">
    <h2 class="category-title">{{ category }}</h2>
  </template>
  <template v-slot:body="{ group }">
    <product-card v-for="item in group" :key="item.id" :data="item"/>
  </template>
</category-list>

响应式分类

结合 Vuex 实现全局状态管理的分类：

const store = new Vuex.Store({
  state: {
    items: []
  },
  getters: {
    groupedItems: state => {
      return state.items.reduce((result, item) => {
        (result[item.category] || (result[item.category] = [])).push(item);
        return result;
      }, {});
    }
  }
});

组件中通过 mapGetters 访问：

import { mapGetters } from 'vuex';
computed: {
  ...mapGetters(['groupedItems'])
}