Cara menggunakan Vue dan Element-UI untuk mengumpulkan dan meringkaskan data

Cara menggunakan Vue dan Element-UI untuk mengumpulkan dan meringkaskan data

Dalam pembangunan bahagian hadapan, kita sering menghadapi situasi di mana kita perlu mengumpulkan dan meringkaskan data. Vue ialah rangka kerja JavaScript yang sangat popular, dan Element-UI ialah pustaka komponen berdasarkan Vue Ia menyediakan set kaya komponen UI yang boleh membantu kami membina halaman dengan cepat. Artikel ini akan memperkenalkan cara menggunakan Vue dan Element-UI untuk mengumpulkan dan meringkaskan data, dan menggambarkannya dengan contoh kod.

Persediaan

Mula-mula, kita perlu memasang Vue dan Element-UI. Mereka boleh dipasang melalui arahan berikut:

npm install vue
npm install element-ui

Selepas pemasangan selesai, kita boleh menggunakan Vue dan Element-UI dalam projek.

Pengumpulan data

Pengumpulan data adalah untuk mengklasifikasikan data dengan atribut yang sama dan memaparkannya mengikut kumpulan. Kita boleh menggunakan komponen jadual dalam Element-UI untuk mencapai fungsi ini.

Andaikan kita mempunyai senarai data prestasi pelajar dengan struktur berikut:

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

Kita perlu mengumpulkan data ini mengikut subjek dan memaparkannya dalam jadual. Mula-mula, kita perlu memperkenalkan komponen jadual Elemen-UI ke dalam komponen Vue:

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

Kemudian, tentukan data yang kita perlukan dan lajur jadual dalam komponen:

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

Dalam cangkuk yang dipasang, kita boleh menulis kod ke memproses Pengumpulan data, di sini kita menggunakan kaedah pengurangan untuk mencapainya:

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

Seterusnya, gunakan komponen jadual dalam templat kami untuk memaparkan 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>

Dengan cara ini, kami telah mencapai pengumpulan data dan paparan dalam meja. Jalankan kod dan anda boleh melihat jadual dikumpulkan mengikut akaun.

Ringkasan data

Seterusnya, mari kita ringkaskan data. Katakan kita perlu memaparkan skor purata dan markah maksimum setiap subjek dalam jadual di atas.

Pertama, kita perlu mentakrifkan beberapa sifat yang dikira dalam komponen untuk mendapatkan data ringkasan:

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

Kemudian, kami menambah dua lajur pada jadual untuk memaparkan data ringkasan:

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

Dengan cara ini, kami telah menyelesaikan pengumpulan dan ringkasan Fungsi data. Jalankan kod dan anda boleh melihat bahawa skor purata dan skor tertinggi untuk setiap subjek dipaparkan dalam jadual.

Ringkasan

Di atas adalah proses mengumpulkan dan meringkaskan data menggunakan Vue dan Element-UI. Dengan memperkenalkan komponen jadual Elemen-UI, kami boleh mengumpulkan dan memaparkan data dengan mudah, dan digabungkan dengan atribut yang dikira, kami juga boleh melaksanakan fungsi ringkasan data. Saya harap artikel ini dapat membantu anda, terima kasih kerana membaca.

Atas ialah kandungan terperinci Cara menggunakan Vue dan Element-UI untuk mengumpulkan dan meringkaskan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!