Vue と Element-UI を使用してデータをグループ化して要約する方法

Vue と Element-UI を使用してデータをグループ化して要約する方法

フロントエンド開発では、データをグループ化して要約する必要がある状況によく遭遇します。 Vue は非常に人気のある JavaScript フレームワークであり、Element-UI は Vue に基づくコンポーネント ライブラリであり、ページを迅速に構築するのに役立つ豊富な UI コンポーネントのセットを提供します。この記事では、Vue と Element-UI を使用してデータをグループ化および要約する方法を紹介し、コード例で説明します。

準備

まず、VueとElement-UIをインストールする必要があります。これらは次のコマンドでインストールできます:

npm install vue
npm install element-ui

インストールが完了すると、プロジェクトで Vue と Element-UI を使用できるようになります。

データのグループ化

データのグループ化とは、同じ属性を持つデータをグループごとに分類して表示することです。 Element-UI のテーブル コンポーネントを使用して、この機能を実現できます。

次の構造を持つ生徒の成績のデータ リストがあるとします。

const scores = [
  { name: '张三', subject: '数学', score: 90 },
  { name: '李四', subject: '语文', score: 85 },
  { name: '王五', subject: '数学', score: 95 },
  { name: '赵六', subject: '语文', score: 92 },
  { name: '小明', subject: '数学', score: 88 },
  { name: '小红', subject: '英语', score: 91 }
];

これらのデータを科目ごとにグループ化し、表に表示する必要があります。まず、Element-UI テーブル コンポーネントを Vue コンポーネントに導入する必要があります:

import { Table, TableColumn } from 'element-ui';

次に、コンポーネント内で必要なデータとテーブル列を定義します:

data() {
  return {
    scores: scores,
    columns: [
      { label: '姓名', prop: 'name' },
      { label: '科目', prop: 'subject' },
      { label: '分数', prop: 'score' }
    ],
    groupedScores: []
  };
},

マウントされたフック内で、データをグループ化するコードを記述できます。ここでは、reduce メソッドを使用して次のことを実現します。

mounted() {
  const groups = this.scores.reduce((acc, score) => {
    const group = acc.find(g => g.subject === score.subject);
    if (group) {
      group.scores.push(score);
    } else {
      acc.push({ subject: score.subject, scores: [score] });
    }
    return acc;
  }, []);
  this.groupedScores = groups;
},

次に、テンプレートのテーブル コンポーネントを使用してデータを表示します。

<el-table :data="groupedScores">
  <el-table-column v-for="column in columns" :label="column.label" :key="column.prop">
    <template slot-scope="{ row }">
      {{ row[column.prop] }}
    </template>
  </el-table-column>
</el-table>

このようにして、データのグループ化と表での表示を実装しました。コードを実行すると、アカウントごとにグループ化されたテーブルが表示されます。

データの要約

次に、データを要約しましょう。上の表に各科目の平均点と最高点を表示する必要があるとします。

まず、概要データを取得するには、コンポーネントでいくつかの計算プロパティを定義する必要があります:

computed: {
  averageScore() {
    return this.groupedScores.map(group => {
      const scores = group.scores.map(score => score.score);
      const average = scores.reduce((sum, score) => sum + score, 0) / scores.length;
      return { subject: group.subject, average: average.toFixed(2) };
    });
  },
  maxScore() {
    return this.groupedScores.map(group => {
      const scores = group.scores.map(score => score.score);
      const max = Math.max(...scores);
      return { subject: group.subject, max: max };
    });
  }
},

次に、テーブルに 2 つの列を追加して、概要データを表示します:

<el-table :data="groupedScores">
  <el-table-column v-for="column in columns" :label="column.label" :key="column.prop">
    <template slot-scope="{ row }">
      {{ row[column.prop] }}
    </template>
  </el-table-column>
  <el-table-column label="平均分">
    <template slot-scope="{ row }">
      {{ averageScore.find(s => s.subject === row.subject).average }}
    </template>
  </el-table-column>
  <el-table-column label="最高分">
    <template slot-scope="{ row }">
      {{ maxScore.find(s => s.subject === row.subject).max }}
    </template>
  </el-table-column>
</el-table>

このようにして、データをグループ化して集計する機能が完成しました。コードを実行すると、各科目の平均スコアと最高スコアが表に表示されることがわかります。

概要

上記は、Vue と Element-UI を使用してデータをグループ化し、要約するプロセスです。 Element-UIのテーブルコンポーネントを導入することで、データを簡単にグループ化して表示でき、計算された属性と組み合わせてデータ集計機能も実装できます。この記事があなたのお役に立てば幸いです、読んでいただきありがとうございます。

以上がVue と Element-UI を使用してデータをグループ化して要約する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。