ホームページ > 記事 > ウェブフロントエンド > Vue コンポーネントの実践: データ フィルタリング コンポーネントの開発
Vue コンポーネントの実践: データ フィルタリング コンポーネントの開発
Vue 開発では、データ フィルタリングは一般的に使用される機能の 1 つです。この記事では、Vue コンポーネントの実際の使用方法、つまりデータ フィルタリング コンポーネントの開発について詳しく説明し、具体的なコード例を通じてその実装プロセスを示し、Vue コンポーネントの使用方法を深く理解するのに役立ちます。
まず第一に、ニーズを明確にする必要があります。これは、入力ボックス、複数選択ボックス、日付選択、範囲選択などの単純なフィルター操作をフロントエンドで実行できるデータ フィルター コンポーネントを開発することです。など、さまざまなシナリオのニーズを満たすデータ フィルタリング要件。
要件に従って、コンポーネントを次の部分に分割できます:
コードは次のとおりです:
<template> <div class="input-filter"> <input type="text" v-model="value" placeholder="请输入关键词" @input="changeInput"> <button @click="search">搜索</button> </div> </template> <script> export default { data() { return { value: "" }; }, methods: { changeInput(event) { this.value = event.target.value; }, search() { this.$emit("search", this.value); } } }; </script> <style scoped> .input-filter { display: flex; margin-bottom: 10px; align-items: center; justify-content: center; } .input-filter input { margin-right: 10px; padding: 5px; border-radius: 4px; border: 1px solid #ccc; font-size: 14px; } .input-filter button { padding: 5px 10px; border-radius: 4px; background-color: #1989fa; color: #fff; border: none; font-size: 14px; } </style>
このコンポーネントには入力ボックスと検索ボタンが含まれています。ユーザーは入力ボックスにキーワードを入力します。検索ボタンをクリックすると、search
イベントがトリガーされ、検索キーワードが に渡されます。親コンポーネント。
コードは次のとおりです。
<template> <div class="checkbox-filter"> <div class="title">{{ title }}</div> <el-checkbox-group v-model="checkedList" @change="handleChange"> <el-checkbox v-for="item in options" :label="item.value" :key="item.value">{{ item.label }}</el-checkbox> </el-checkbox-group> </div> </template> <script> export default { props: { title: { type: String, default: "" }, options: { type: Array, default: () => [] } }, data() { return { checkedList: [] }; }, methods: { handleChange(checkedList) { this.$emit("change", checkedList); } } }; </script> <style scoped> .checkbox-filter { margin-bottom: 10px; } .checkbox-filter .title { font-size: 16px; font-weight: bold; margin-bottom: 5px; } </style>
このコンポーネントには、複数選択ボックスとタイトルが含まれています。複数選択ボックスでユーザーが選択 フィルタリングする必要があるオプションを選択すると、change
イベントがトリガーされ、選択されたオプションが親コンポーネントに渡されます。
コードは次のとおりです:
<template> <div class="date-filter"> <el-row :gutter="10"> <el-col :span="12"> <el-date-picker v-model="start" type="date" placeholder="开始日期" @change="handleChange" /> </el-col> <el-col :span="12"> <el-date-picker v-model="end" type="date" placeholder="结束日期" @change="handleChange" /> </el-col> </el-row> </div> </template> <script> export default { data() { return { start: "", end: "" }; }, methods: { handleChange() { this.$emit("change", { start: this.start, end: this.end }); } } }; </script> <style scoped> .date-filter { margin-bottom: 10px; } </style>
このコンポーネントには 2 つの日付ピッカーが含まれており、ユーザーは開始日と終了日を選択できます。 date、選択後、change
イベントがトリガーされ、選択された日付範囲が親コンポーネントに渡されます。
コードは次のとおりです:
<template> <div class="range-filter"> <el-row :gutter="10"> <el-col :span="12"> <el-input-number v-model.number="min" controls-position="right" :min="0" :step="1" @change="handleChange" /> </el-col> <el-col :span="12"> <el-input-number v-model.number="max" controls-position="right" :min="0" :step="1" @change="handleChange" /> </el-col> </el-row> </div> </template> <script> export default { data() { return { min: 0, max: 0 }; }, methods: { handleChange() { this.$emit("change", { min: this.min, max: this.max }); } } }; </script> <style scoped> .range-filter { margin-bottom: 10px; } </style>
このコンポーネントには 2 つの数値入力ボックスが含まれており、ユーザーは数値範囲を選択できます。選択すると、change
イベントがトリガーされ、選択された範囲が親コンポーネントに渡されます。
上記の 4 つのコンポーネントを組み合わせて使用すると、多次元のデータ フィルタリングを実現できます。親コンポーネントでは、これらのサブコンポーネントを組み合わせて、完全なデータ フィルタリング機能を完成させることができます。
コードは次のとおりです:
<template> <div class="filter-container"> <input-filter @search="onSearch" /> <checkbox-filter :title="title1" :options="options1" @change="onChange1" /> <date-filter @change="onChange2" /> <range-filter @change="onChange3" /> </div> </template> <script> import InputFilter from "./InputFilter.vue"; import CheckboxFilter from "./CheckboxFilter.vue"; import DateFilter from "./DateFilter.vue"; import RangeFilter from "./RangeFilter.vue"; export default { components: { InputFilter, CheckboxFilter, DateFilter, RangeFilter }, data() { return { title1: "多选框筛选", options1: [ { label: "选项1", value: 1 }, { label: "选项2", value: 2 }, { label: "选项3", value: 3 } ] }; }, methods: { onSearch(value) { console.log("搜索关键词:", value); }, onChange1(value) { console.log("多选框选中的值:", value); }, onChange2(value) { console.log("日期选择范围:", value); }, onChange3(value) { console.log("范围选择范围:", value); } } }; </script> <style scoped> .filter-container { margin: 20px; } </style>
ここではフィルタリング コンポーネントの簡単な例をいくつか示します。実際のニーズに応じてこれらを組み合わせたり拡張したりして、データ フィルタリング機能を強化できます。
概要
この記事では、Vue コンポーネントの実際の戦闘、つまりデータ フィルタリング コンポーネントの開発について詳しく紹介し、読者が Vue コンポーネントの使用法をよりよく理解できるように複数の具体的なコード例を提供します。日々の開発でデータ フィルタリングの必要性が生じた場合は、上記のコンポーネントを通じてデータ フィルタリングを実装することで、開発効率とユーザー エクスペリエンスを向上させることができます。
以上がVue コンポーネントの実践: データ フィルタリング コンポーネントの開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。