データのフィルタリングとフィルター処理に Vue と Element-UI を使用する方法

データのスクリーニングとフィルタリングに Vue と Element-UI を使用する方法

はじめに:
インターネットの急速な発展に伴い、データ処理とフィルタリングは多くのアプリケーションの重要な部分になりました。人気の JavaScript フレームワークとして、Vue.js は強力なデータ バインディングと応答機能を提供し、データの処理とフィルタリングを容易にします。 Element-UI は、豊富なテーブルおよびフィルタリング機能を提供する機能豊富な UI コンポーネント ライブラリであり、Vue.js と組み合わせて使用​​できます。この記事では、Vue と Element-UI を使用してデータのフィルタリングとフィルター処理を行う方法と、対応するコード例を紹介します。

実装手順:

1. Vue と Element-UI のインストール:
   まず、npm または Yarn を使用して Vue と Element-UI をインストールします。プロジェクトのルート ディレクトリで次のコマンドを実行します。

   npm install --save vue
   npm install --save element-ui

2. Vue と Element-UI の紹介:
   必要なページのインポート ステートメントを通じて、Vue と Element-UI 関連の情報を紹介します。使用するコンポーネントとスタイル。

   import Vue from 'vue'
   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   
   Vue.use(ElementUI)

3. データとフィルター条件を定義します:
   Vue インスタンスでフィルターする必要があるデータとフィルター条件を定義します。たとえば、「items」という名前の配列と「filter」という名前のフィルター条件を定義します。

   data() {
     return {
    items: [
      { name: 'Apple', price: 10 },
      { name: 'Banana', price: 20 },
      { name: 'Orange', price: 30 },
    ],
    filter: '',
     }
   }

4. Element-UI の入力コンポーネントを使用して、フィルター条件をバインドします。 Element-UI の入力コンポーネントを使用してフィルター条件をバインドし、フィルター条件を Vue インスタンスの「filter」プロパティにバインドします。
   

   <el-input v-model="filter"></el-input>

5. 計算されたプロパティをデータ フィルターに使用する:

   計算されたプロパティを使用して、フィルター条件に基づいてデータをフィルターします。
   

   computed: {
     filteredItems() {
    return this.items.filter(item => {
      return item.name.toLowerCase().includes(this.filter.toLowerCase())
    })
     }
   }

6. フィルタリングされたデータをテーブルに表示します。

   Element-UI のテーブル コンポーネントを使用して、フィルタリングされたデータをテーブルに表示します。
   

   <el-table :data="filteredItems">
     <el-table-column prop="name" label="名称"></el-table-column>
     <el-table-column prop="price" label="价格"></el-table-column>
   </el-table>

サンプル コード:

<template>
  <div>
    <el-input v-model="filter" placeholder="请输入关键字进行过滤"></el-input>
    <br>
    <el-table :data="filteredItems">
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

export default {
  data() {
    return {
      items: [
        { name: 'Apple', price: 10 },
        { name: 'Banana', price: 20 },
        { name: 'Orange', price: 30 },
      ],
      filter: '',
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        return item.name.toLowerCase().includes(this.filter.toLowerCase())
      })
    }
  }
}
</script>

<style>
/* 样式定义省略 */
</style>

概要:

この記事では、データのフィルタリングとフィルター処理に Vue と Element-UI を使用する方法を紹介し、関連するコード例を示します。 。 Vueが提供するレスポンシブ機能とElement-UIが提供する豊富なコンポーネントを利用することで、データのフィルタリングやフィルター機能を簡単に実装できます。この記事が、データのフィルタリングやフィルター処理に Vue や Element-UI を使用する開発者にとって役立つことを願っています。

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