vue と Element-plus を使用して検索およびフィルタリング機能を実装する方法

Vue と Element-Plus を使用して検索およびフィルター機能を実装する方法

はじめに:
最新の Web アプリケーションでは、検索およびフィルター機能は非常に重要な部分であり、ユーザーが目的の内容をすばやく見つけるのに役立ちます。欲しい、情報が必要。人気の JavaScript フレームワークである Vue と、Vue 用の UI コンポーネント ライブラリである Element-Plus を組み合わせることで、検索機能やフィルタリング機能を簡単に実装できます。この記事では、Vue と Element-Plus を使用してこれらの関数を実装する方法を紹介し、関連するコード例を示します。

1. 準備
   まず、Vue と Element-Plus をインストールする必要があります。次のコマンドを使用してインストールできます:

npm install vue
npm install element-plus

2. Vue アプリケーションの作成
   次に、Vue アプリケーションを作成する必要があります。 Vue のスキャフォールディング ツールを使用して、基本的な Vue アプリケーションを作成できます。コマンド ラインで次のコマンドを実行します:

vue create search-filter-app
cd search-filter-app

次に、プロンプトに従って構成オプションを選択するか、デフォルト構成を直接使用して Vue アプリケーションを生成します。

3. Element-Plus コンポーネントのインポート
   作成した Vue アプリケーションで、Element-Plus の関連コンポーネントをインポートする必要があります。 src/main.js ファイルを開き、次のコードを追加します。

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'

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

ここでは、ES6 モジュール インポート構文を使用し、createApp 関数をインポートします。 Element-Plus コンポーネントの使用が必要です。次に、createApp 関数を使用して Vue アプリケーションを作成し、アプリケーションで Element-Plus を使用しました。

4. 検索およびフィルター コンポーネントの作成
   検索およびフィルター機能を実装する 2 つの Vue コンポーネントを作成できます。 src/components ディレクトリに 2 つのファイル SearchBar.vue と FilterBar.vue を作成します。 SearchBar.vue ファイルに次のコードを追加します:

<template>
  <div>
    <el-input v-model="searchKeyword" placeholder="请输入搜索关键字"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: ''
    }
  },
  watch: {
    searchKeyword(newKeyword) {
      this.$emit('search', newKeyword)
    }
  }
}
</script>

次のコードを FilterBar.vue ファイルに追加します:

<template>
  <div>
    <el-select v-model="filterOption" placeholder="请选择过滤条件" @change="filterData">
      <el-option label="选项1" value="option1"></el-option>
      <el-option label="选项2" value="option2"></el-option>
      <el-option label="选项3" value="option3"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filterOption: ''
    }
  },
  methods: {
    filterData() {
      this.$emit('filter', this.filterOption)
    }
  }
}
</script>

ここでは、それぞれ 2 つのコンポーネントを作成し、コンポーネント内で Element-Plus 入力ボックスとドロップダウン選択ボックス コンポーネントを使用しました。 SearchBar コンポーネントでは、v-model ディレクティブを使用して双方向データ バインディングを実装し、watch で searchKeyword## を監視していることに注意してください。オプション # が変更され、$emit メソッドを通じて値が親コンポーネントに渡されます。

検索コンポーネントとフィルター コンポーネントの使用
5. アプリ コンポーネントでは、以前に作成した検索コンポーネントとフィルター コンポーネントを使用できます。
   src/App.vue ファイルを開き、次のコードを追加します。

<template>
  <div>
    <SearchBar @search="handleSearch"></SearchBar>
    <FilterBar @filter="handleFilter"></FilterBar>
    <ul>
      <li v-for="item in filteredData" v-bind:key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import SearchBar from './components/SearchBar.vue'
import FilterBar from './components/FilterBar.vue'

export default {
  components: {
    SearchBar,
    FilterBar
  },
  data() {
    return {
      data: [
        { id: 1, name: 'item1', option: 'option1' },
        { id: 2, name: 'item2', option: 'option2' },
        { id: 3, name: 'item3', option: 'option3' }
      ],
      searchKeyword: '',
      filterOption: ''
    }
  },
  computed: {
    filteredData() {
      let result = this.data
      if (this.searchKeyword) {
        result = result.filter(item => item.name.toLowerCase().includes(this.searchKeyword.toLowerCase()))
      }
      if (this.filterOption) {
        result = result.filter(item => item.option === this.filterOption)
      }
      return result
    }
  },
  methods: {
    handleSearch(keyword) {
      this.searchKeyword = keyword
    },
    handleFilter(option) {
      this.filterOption = option
    }
  }
}
</script>

ログイン後にコピー

< を渡します。 SearchBar @search="handleSearch">andイベントをアプリ コンポーネントのメソッドにバインドします。 data にデータ配列を定義し、検索キーワードとフィルタ条件に従ってフィルタリングして、filteredData 配列を取得します。次に、v-for ディレクティブを使用して、filteredData 配列内の各要素をリスト項目としてレンダリングします。

コードの実行
6. 最後に、コマンド ラインで次のコマンドを実行してアプリケーションを開始できます。
   

npm run serve

ログイン後にコピー
次に、次の

http にアクセスします。ブラウザー://localhost:8080 にアクセスすると、検索ボックスとドロップダウン選択ボックスのあるページが表示されます。検索キーワードを入力するか、フィルタ条件を選択すると、入力に基づいてリスト内のデータが検索およびフィルタされます。

結論:

Vue と Element-Plus を使用すると、検索機能とフィルタリング機能を簡単に実装できます。 VueのデータバインディングとElement-Plusの入力ボックスやドロップダウン選択ボックスのコンポーネントを利用し、イベントやデータの送信を通じてデータに検索キーワードやフィルター条件を適用することで、検索・フィルター機能を実現しました。上記は簡単な例であり、独自のニーズに応じてさらに開発およびカスタマイズできます。


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