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: []
  };
},

마운트된 후크에서 코드를 작성할 수 있습니다. 데이터 그룹화를 처리합니다. 여기서는 축소 방법을 사용하여 이를 달성합니다.

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

그런 다음 테이블에 두 개의 열을 추가하여 요약 데이터를 표시합니다.

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

이런 방식으로 그룹화를 완료했습니다. 및 데이터 기능 요약. 코드를 실행하면 과목별 평균점수와 최고점수가 표에 표시되는 것을 확인할 수 있습니다.

Summary

위는 Vue와 Element-UI를 이용하여 데이터를 그룹화하고 요약하는 과정입니다. Element-UI의 테이블 컴포넌트를 도입함으로써 데이터를 쉽게 그룹화하고 표시할 수 있으며, 계산된 속성과 결합하여 데이터 요약 기능도 구현할 수 있습니다. 이 글이 도움이 되셨으면 좋겠습니다. 읽어주셔서 감사합니다.

위 내용은 Vue 및 Element-UI를 사용하여 데이터를 그룹화하고 요약하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!