element plus vue3 groupBy 如何使用

Element Plus 是基于 Vue.js 的 UI 组件库，而 `groupBy` 可能是指在数组处理中对数据进行分组的功能。在 Vue 3 中，尤其是当你需要对数组对象按照某个属性进行分组时，可以借助 `Object.entries()` 和 `reduce()` 函数结合使用。

下面是一个简单的例子说明如何在 Element Plus 中使用 `groupBy` 来对数据进行分组：

<template>
  <el-table :data="groups">
    <el-table-column prop="key" label="Key"></el-table-column>
    <el-table-column v-for="(value, key) in Object.keys(groups[0])" :prop="key" label="Value" :key="key">
      {{ value }}
    </el-table-column>
  </el-table>
</template>

<script setup>
import { reactive } from 'vue';

// 假设你有一个名为 'data' 的数组，每个对象都有 'category' 属性
const data = [
  { name: 'Item 1', category: 'Group A' },
  { name: 'Item 2', category: 'Group B' },
  // ...
];

// 使用 groupBy 将 data 按照 category 分组
const groups = reactive(Object.fromEntries(
  data.reduce((acc, item) => {
    (acc[item.category] ??= []).push(item);
    return acc;
  }, {}),
));

</script>

在这个例子中，我们首先将原始数据通过 `reduce` 函数按 `'category'` 属性分组到一个新的对象中，键是类别名，值是包含该类别的数组。然后，在模板里，我们将这些分组后的数据展示在一个表格里，每行代表一组，列则显示分类名及其对应的项。