vue と Element-plus を使用してデータのフィルタリングと統計を実装する方法

Vue と Element Plus を使用してデータ フィルタリングと統計を実装する方法

はじめに: 人気のフロントエンド フレームワークとしての Vue を、強力な UI ライブラリである Element Plus と組み合わせることで、データ フィルタリングと統計を簡単に実装できます。統計関数。この記事では、Vue と Element Plus を使用してこの機能を実装する方法を紹介し、コード例を通して具体的な実装プロセスを示します。

1. プロジェクトを作成し、Element Plus を導入します

まず、コマンド ラインで Vue CLI を使用して新しいプロジェクトを作成します:

vue create data-filter

次に、プロジェクトに入り、Element をインストールしますプラス :

cd data-filter
npm install element-plus

main.js ファイルに Element 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. データ ソースとフィルター コンポーネントを作成します

App.vue では、まずデータを作成しますソースとフィルター基準を含むコンポーネント。データ ソースは配列にすることができ、各要素はさまざまなプロパティを含むオブジェクトです。フィルター コンポーネントには、テキスト入力ボックス、ドロップダウン選択ボックスなどの複数の条件を含めることができます。

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

上記のコードでは、データ オプションでデータ ソース データを定義しました。これにはいくつかのテスト データが含まれています。絞り込み条件にはテキスト入力ボックスとドロップダウン選択ボックスがあり、名前の入力と年齢の選択によりデータを絞り込むことができます。 filteredData は、フィルター条件に基づいて条件を満たすデータを動的に計算するために使用される計算プロパティです。

3. 統計コンポーネントの作成

フィルタリング機能に加えて、Element Plus が提供するチャート コンポーネントを通じてデータ統計を実行することもできます。 App.vue では、フィルタリングされたデータを視覚的に表示する統計コンポーネントを作成できます。

まず、テンプレートに echart を導入し、次にグラフを含むコンテナと統計関数をトリガーするボタンを追加します。

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

showStatisticChart メソッドでは、echarts を使用してチャート インスタンスを作成し、チャート コンテナーとフィルター処理されたデータを渡します。次に、オプションを設定してグラフのスタイルとデータを定義します。上記のコードでは、X 軸に名前、Y 軸に年齢をとった単純なヒストグラムを表示します。最後に、chart.setOption メソッドを呼び出して、オプションをグラフに適用します。

4. プロジェクトの実行

この時点で、データ フィルタリングと統計関数のコーディングが完了しました。次に、プロジェクトを実行して効果を確認します。

npm run serve

ブラウザを開いて http://localhost:8080 と入力し、実行中の効果を確認します。入力ボックスに名前を入力するか、年齢を選択すると、絞り込み条件を満たすデータがリアルタイムにデータ一覧に更新されます。 [統計をクリック] ボタンをクリックすると、各人の年齢を示す基本的なヒストグラムが表示されます。

概要: Vue と Element Plus を使用すると、データ フィルタリングと統計関数を簡単に実装できます。 Element Plus が提供する UI コンポーネントを使用すると、インタラクティブ性と視覚効果を備えたページをすばやく作成できます。この記事が、Vue と Element Plus を使用してデータ フィルタリングと統計を実装する方法を習得するのに役立つことを願っています。

以上がvue と Element-plus を使用してデータのフィルタリングと統計を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。