Cara menggunakan vue dan Element-plus untuk melaksanakan penapisan dan statistik data

Cara menggunakan Vue dan Element Plus untuk melaksanakan penapisan data dan statistik

Pengenalan: Vue, sebagai rangka kerja hadapan yang popular, digabungkan dengan Element Plus, perpustakaan UI yang berkuasa, boleh melaksanakan fungsi penapisan dan statistik data dengan mudah. Artikel ini akan memperkenalkan cara menggunakan Vue dan Element Plus untuk melaksanakan fungsi ini dan menunjukkan proses pelaksanaan khusus melalui contoh kod.

1. Buat projek dan perkenalkan Element Plus

Mula-mula, gunakan Vue CLI dalam baris arahan untuk mencipta projek baharu:

vue create data-filter

Kemudian masukkan projek dan pasang Element Plus:

cd data-filter
npm install element-plus

Perkenalkan Elemen dalam main.js file Plus:

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

createApp(App).use(ElementPlus).mount('#app')

2. Cipta sumber data dan komponen penapis

Dalam App.vue, kami mula-mula mencipta sumber data dan komponen yang mengandungi syarat penapis. Sumber data boleh menjadi tatasusunan, setiap elemen adalah objek yang mengandungi pelbagai sifat. Komponen penapis boleh mempunyai berbilang syarat, seperti kotak input teks, kotak pilihan lungsur turun, dsb.

<template>
  <div>
    <div class="filters">
      <el-input v-model="filterText" placeholder="请输入姓名进行筛选"></el-input>
      <el-select v-model="filterAge" placeholder="请选择年龄进行筛选">
        <el-option label="18岁以下" value="18"></el-option>
        <el-option label="18-30岁" value="18-30"></el-option>
        <el-option label="30岁以上" value="30"></el-option>
      </el-select>
    </div>
    <div class="data-list">
      <div v-for="item in filteredData" :key="item.id">{{ item.name }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filterText: '',
      filterAge: '',
      data: [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 25 },
        { id: 3, name: '王五', age: 30 },
        // ...
      ]
    }
  },
  computed: {
    filteredData() {
      return this.data.filter(item => {
        return (item.name.includes(this.filterText) || item.age.toString() === this.filterAge)
      })
    }
  }
}
</script>

Dalam kod di atas, kami menentukan data sumber data dalam pilihan data, yang mengandungi beberapa data ujian. Syarat penapis termasuk kotak input teks dan kotak pilihan lungsur turun, dan pengguna boleh menapis data dengan memasukkan nama mereka dan memilih umur mereka. filteredData ialah sifat terkira yang digunakan untuk mengira data secara dinamik yang memenuhi syarat berdasarkan syarat penapis.

3. Tulis komponen statistik

Selain fungsi penapisan, kami juga boleh melakukan statistik data melalui komponen carta yang disediakan oleh Element Plus. Dalam App.vue, kami boleh menulis komponen statistik untuk memaparkan data yang ditapis secara visual.

Mula-mula, perkenalkan carta dalam templat, kemudian tambahkan bekas yang mengandungi carta dan butang untuk mencetuskan fungsi statistik.

<template>
  <div>
    <div class="filters">
      <!-- 筛选组件代码 -->
    </div>
    <div class="data-list">
      <!-- 数据列表代码 -->
    </div>
    <div class="statistic-chart" ref="chart"></div>
    <el-button type="primary" @click="showStatisticChart">点击统计</el-button>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  // ...
  methods: {
    showStatisticChart() {
      const chart = echarts.init(this.$refs.chart)
      const data = this.filteredData
      const names = data.map(item => item.name)
      const ages = data.map(item => item.age)

      const option = {
        tooltip: {},
        legend: {
          data: ['年龄']
        },
        xAxis: {
          data: names
        },
        yAxis: {},
        series: [{
          name: '年龄',
          type: 'bar',
          data: ages
        }]
      }

      chart.setOption(option)
    }
  }
}
</script>

Dalam kaedah showStatisticChart, kami menggunakan echarts untuk mencipta contoh carta dan menghantar dalam bekas carta dan data yang ditapis. Kemudian, tentukan gaya dan data carta dengan menetapkan pilihan pilihan. Dalam kod di atas, kami menunjukkan histogram ringkas dengan nama pada paksi-x dan umur pada paksi-y. Akhir sekali, panggil kaedah chart.setOption untuk menggunakan pilihan pada carta.

4. Jalankan projek

Pada ketika ini, kami telah menyelesaikan penapisan data dan pengekodan fungsi statistik. Sekarang jalankan projek untuk melihat kesannya.

npm run serve

Buka pelayar dan masukkan http://localhost:8080 untuk melihat kesan berjalan. Masukkan nama anda atau pilih umur anda dalam kotak input dan senarai data akan dikemas kini dalam masa nyata dengan data yang memenuhi syarat penapisan. Klik butang "Klik Statistik", dan histogram asas akan muncul menunjukkan umur setiap orang.

Ringkasan: Melalui Vue dan Element Plus, kami boleh melaksanakan fungsi penapisan data dan statistik dengan mudah. Menggunakan komponen UI yang disediakan oleh Element Plus, kami boleh menulis halaman dengan cepat dengan interaktiviti dan kesan visual. Saya harap artikel ini akan membantu anda menguasai cara menggunakan Vue dan Element Plus untuk melaksanakan penapisan data dan statistik.

Atas ialah kandungan terperinci Cara menggunakan vue dan Element-plus untuk melaksanakan penapisan dan statistik data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!