Comment utiliser Vue et Element-UI pour regrouper et résumer les données

Comment utiliser Vue et Element-UI pour regrouper et résumer des données

Dans le développement front-end, nous rencontrons souvent des situations où nous devons regrouper et résumer des données. Vue est un framework JavaScript très populaire et Element-UI est une bibliothèque de composants basée sur Vue. Elle fournit un riche ensemble de composants d'interface utilisateur qui peuvent nous aider à créer rapidement des pages. Cet article expliquera comment utiliser Vue et Element-UI pour regrouper et résumer des données, et l'illustrera avec des exemples de code.

Préparation

Tout d'abord, nous devons installer Vue et Element-UI. Ils peuvent être installés via la commande suivante :

npm install vue
npm install element-ui

Une fois l'installation terminée, nous pouvons utiliser Vue et Element-UI dans le projet.

Regroupement de données

Le regroupement de données consiste à classer les données avec les mêmes attributs et à les afficher selon des groupes. Nous pouvons utiliser le composant table dans Element-UI pour réaliser cette fonction.

Supposons que nous ayons une liste de données sur les performances des élèves avec la structure suivante :

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 }
];

Nous devons regrouper ces données en fonction des matières et les afficher dans un tableau. Tout d'abord, nous devons introduire le composant table Element-UI dans le composant Vue :

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

Ensuite, définir les données dont nous avons besoin et les colonnes de la table dans le composant :

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

Dans le hook monté, nous pouvons écrire du code pour traiter le regroupement des données, nous utilisons ici la méthode de réduction pour y parvenir :

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;
},

Ensuite, utilisez le composant table dans notre modèle pour afficher les données :

<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>

De cette façon, nous avons réalisé le regroupement des données et l'affichage dans le tableau. Exécutez le code et vous pourrez voir un tableau regroupé par compte.

Résumé des données

Ensuite, résumons les données. Supposons que nous devions afficher le score moyen et le score maximum de chaque matière dans le tableau ci-dessus.

Tout d'abord, nous devons définir certaines propriétés calculées dans le composant pour obtenir les données récapitulatives :

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 };
    });
  }
},

Ensuite, nous ajoutons deux colonnes au tableau pour afficher les données récapitulatives :

<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>

De cette façon, nous avons terminé le regroupement et résumé de la fonction de données. Exécutez le code et vous pourrez voir que le score moyen et le score le plus élevé pour chaque matière sont affichés dans le tableau.

Résumé

Ce qui précède est le processus de regroupement et de synthèse des données à l'aide de Vue et Element-UI. En introduisant le composant tableau d'Element-UI, nous pouvons facilement regrouper et afficher les données, et en combinaison avec les attributs calculés, nous pouvons également implémenter la fonction de résumé des données. J'espère que cet article vous sera utile, merci d'avoir lu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!