当前位置：首页 > VUE

vue实现分组表格

2026-03-08 10:10:53VUE

实现分组表格的基本思路

在Vue中实现分组表格通常需要结合数据重组和组件嵌套。核心是将原始数据按特定字段分组，再通过嵌套循环渲染表格结构。以下是具体实现方法：

数据准备与分组处理

使用计算属性对原始数据进行分组处理。假设需要按category字段分组：

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

模板结构设计

采用双层v-for循环渲染分组表格：

vue实现分组表格

<table>
  <tbody v-for="(group, groupName) in groupedData" :key="groupName">
    <tr class="group-header">
      <td :colspan="columns.length">{{ groupName }}</td>
    </tr>
    <tr v-for="(item, index) in group" :key="index">
      <td v-for="col in columns">{{ item[col.key] }}</td>
    </tr>
  </tbody>
</table>

样式优化

为分组头添加视觉区分：

.group-header td {
  background-color: #f5f7fa;
  font-weight: bold;
  padding: 8px 12px;
}

动态列处理

通过配置式列定义实现灵活性：

vue实现分组表格

data() {
  return {
    columns: [
      { key: 'name', title: '名称' },
      { key: 'value', title: '数值' }
    ]
  }
}

使用第三方组件库

若使用Element UI等库，可直接利用其分组功能：

<el-table :data="flattenData" row-key="id">
  <el-table-column prop="name" label="名称"></el-table-column>
  <el-table-column prop="value" label="数值"></el-table-column>
  <el-table-column type="expand">
    <template #default="{row}">
      <el-table :data="row.children"></el-table>
    </template>
  </el-table-column>
</el-table>

性能优化建议

对于大数据量场景，建议：

使用虚拟滚动技术
实现分组数据的懒加载
添加分组展开/折叠功能

完整组件示例

export default {
  data() {
    return {
      originalData: [
        { category: 'A', name: 'Item1', value: 10 },
        { category: 'A', name: 'Item2', value: 20 },
        { category: 'B', name: 'Item3', value: 30 }
      ],
      columns: [
        { key: 'name', title: '名称' },
        { key: 'value', title: '数值' }
      ]
    }
  },
  computed: {
    groupedData() {
      // 分组逻辑同上
    }
  }
}