当前位置：首页 > VUE

vue实现分组表格

2026-01-15 07:28:48VUE

Vue 实现分组表格的方法

使用 v-for 嵌套循环实现分组

通过嵌套的 v-for 循环可以轻松实现分组表格。外层循环遍历分组数据，内层循环遍历每组中的具体项。

<template>
  <table>
    <tbody v-for="group in groupedData" :key="group.name">
      <tr class="group-header">
        <th colspan="2">{{ group.name }}</th>
      </tr>
      <tr v-for="item in group.items" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.value }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      groupedData: [
        {
          name: 'Group 1',
          items: [
            { id: 1, name: 'Item 1', value: 'Value 1' },
            { id: 2, name: 'Item 2', value: 'Value 2' }
          ]
        },
        {
          name: 'Group 2',
          items: [
            { id: 3, name: 'Item 3', value: 'Value 3' }
          ]
        }
      ]
    }
  }
}
</script>

<style>
.group-header {
  background-color: #f5f5f5;
  font-weight: bold;
}
</style>

使用计算属性动态分组

当原始数据需要按特定条件分组时，可以使用计算属性动态生成分组数据。

<template>
  <table>
    <tbody v-for="group in groupedItems" :key="group.category">
      <tr class="group-header">
        <th colspan="2">{{ group.category }}</th>
      </tr>
      <tr v-for="item in group.items" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple', price: 1.2, category: 'Fruit' },
        { id: 2, name: 'Banana', price: 0.8, category: 'Fruit' },
        { id: 3, name: 'Carrot', price: 0.5, category: 'Vegetable' }
      ]
    }
  },
  computed: {
    groupedItems() {
      const groups = {}
      this.items.forEach(item => {
        if (!groups[item.category]) {
          groups[item.category] = {
            category: item.category,
            items: []
          }
        }
        groups[item.category].items.push(item)
      })
      return Object.values(groups)
    }
  }
}
</script>

使用第三方组件库

对于更复杂的分组表格需求，可以考虑使用专门的UI组件库：

Element UI 的表格组件支持分组显示

<el-table :data="tableData">
<el-table-column prop="date" label="Date"></el-table-column>
<el-table-column label="Group">
 <el-table-column prop="name" label="Name"></el-table-column>
 <el-table-column prop="amount" label="Amount"></el-table-column>
</el-table-column>
</el-table>

Vuetify 的数据表格也支持类似功能

<v-data-table
:headers="headers"
:items="items"
group-by="category"
></v-data-table>

实现可折叠的分组表格

通过添加展开/折叠功能可以提升分组表格的交互体验。

<template>
  <table>
    <tbody v-for="group in groups" :key="group.name">
      <tr class="group-header" @click="toggleGroup(group)">
        <th colspan="2">
          {{ group.name }}
          <span>{{ group.isOpen ? '▼' : '▶' }}</span>
        </th>
      </tr>
      <tr v-for="item in group.items" v-show="group.isOpen" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.value }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      groups: [
        {
          name: 'Group 1',
          items: [
            { id: 1, name: 'Item 1', value: 'Value 1' },
            { id: 2, name: 'Item 2', value: 'Value 2' }
          ],
          isOpen: true
        },
        {
          name: 'Group 2',
          items: [
            { id: 3, name: 'Item 3', value: 'Value 3' }
          ],
          isOpen: false
        }
      ]
    }
  },
  methods: {
    toggleGroup(group) {
      group.isOpen = !group.isOpen
    }
  }
}
</script>

响应式分组表格设计

为了确保分组表格在不同设备上都能良好显示，可以添加响应式设计。

vue实现分组表格

@media screen and (max-width: 600px) {
  table {
    display: block;
  }
  tbody {
    display: block;
    margin-bottom: 1rem;
  }
  .group-header th {
    display: block;
  }
  tr {
    display: block;
    margin-bottom: 0.5rem;
  }
  td {
    display: block;
    text-align: right;
  }
  td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}

这些方法涵盖了从基础到高级的Vue分组表格实现方式，可以根据具体需求选择合适的方法或组合使用多种技术。