How to use Vue and Element-UI to group and summarize data

How to use Vue and Element-UI to group and summarize data

In front-end development, we often encounter situations where we need to group and summarize data. Vue is a very popular JavaScript framework, and Element-UI is a component library based on Vue. It provides a rich set of UI components that can help us quickly build pages. This article will introduce how to use Vue and Element-UI to group and summarize data, and illustrate it with code examples.

Preparation

First, we need to install Vue and Element-UI. They can be installed through the following command:

npm install vue
npm install element-ui

After the installation is completed, we can use Vue and Element-UI in the project.

Data Grouping

Data grouping is to classify data with the same attributes and display them according to groups. We can use the table component in Element-UI to achieve this function.

Suppose we have a data list of student performance, with the following structure:

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

We need to group these data according to subjects and display them in a table. First, we need to introduce the Element-UI table component into the Vue component:

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

Then, define the data and table columns we need in the component:

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

In the mounted hook , we can write code to group data, here we use the reduce method to achieve:

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

Next, use the table component in our template to display the data:

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

In this way, We have implemented the grouping of data and display in tables. Run the code and you can see a table grouped by account.

Data Summary

Next, let’s summarize the data. Suppose we need to display the average score and maximum score of each subject in the above table.

First, we need to define some calculated properties in the component to obtain summary data:

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

Then, we add two columns to the table to display summary data:

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

In this way, we have completed the functions of grouping and summarizing data. Run the code and you can see that the average score and the highest score for each subject are displayed in the table.

Summary

The above is the process of using Vue and Element-UI to group and summarize data. By introducing the table component of Element-UI, we can easily group and display data, and combined with calculated attributes, we can also implement the data summary function. I hope this article is helpful to you, thank you for reading.

The above is the detailed content of How to use Vue and Element-UI to group and summarize data. For more information, please follow other related articles on the PHP Chinese website!