当前位置：首页 > VUE

vue循环实现分类表格

2026-02-23 19:56:04VUE

vue循环实现分类表格的方法

在Vue中实现分类表格可以通过v-for指令结合计算属性或方法对数据进行分组处理。以下是具体实现方式：

数据准备 假设原始数据为包含分类字段的数组：

data() {
  return {
    items: [
      { id: 1, name: '苹果', category: '水果' },
      { id: 2, name: '香蕉', category: '水果' },
      { id: 3, name: '胡萝卜', category: '蔬菜' }
    ]
  }
}

计算属性分组 使用计算属性将数据按分类字段分组：

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

模板渲染 在模板中使用嵌套v-for渲染分类表格：

vue循环实现分类表格

<table>
  <template v-for="(group, category) in groupedItems">
    <tr class="category-row">
      <th colspan="2">{{ category }}</th>
    </tr>
    <tr v-for="item in group" :key="item.id">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
    </tr>
  </template>
</table>

样式优化 添加CSS使分类行更醒目：

.category-row {
  background-color: #f0f0f0;
  font-weight: bold;
}

动态排序版本 如需动态控制分类顺序，可添加排序计算属性：

vue循环实现分类表格

computed: {
  sortedCategories() {
    return Object.keys(this.groupedItems).sort();
  }
}

带排序的模板

<table>
  <template v-for="category in sortedCategories">
    <tr class="category-row">
      <th colspan="2">{{ category }}</th>
    </tr>
    <tr v-for="item in groupedItems[category]" :key="item.id">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
    </tr>
  </template>
</table>

处理更复杂的数据结构

对于多层嵌套分类，可以使用递归组件：

components: {
  'category-group': {
    props: ['group'],
    template: `
      <div>
        <h3>{{ group.name }}</h3>
        <template v-if="group.items">
          <category-group 
            v-for="(child, index) in group.items" 
            :key="index"
            :group="child"/>
        </template>
        <template v-else>
          <div v-for="item in group" :key="item.id">{{ item.name }}</div>
        </template>
      </div>
    `
  }
}