Vue コンポーネントの実践: データ フィルタリング コンポーネントの開発

Vue コンポーネントの実践: データ フィルタリング コンポーネントの開発

Vue 開発では、データ フィルタリングは一般的に使用される機能の 1 つです。この記事では、Vue コンポーネントの実際の使用方法、つまりデータ フィルタリング コンポーネントの開発について詳しく説明し、具体的なコード例を通じてその実装プロセスを示し、Vue コンポーネントの使用方法を深く理解するのに役立ちます。

まず第一に、ニーズを明確にする必要があります。これは、入力ボックス、複数選択ボックス、日付選択、範囲選択などの単純なフィルター操作をフロントエンドで実行できるデータ フィルター コンポーネントを開発することです。など、さまざまなシナリオのニーズを満たすデータ フィルタリング要件。

要件に従って、コンポーネントを次の部分に分割できます:

1. 入力ボックスのフィルタリング

コードは次のとおりです:

<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 イベントがトリガーされ、検索キーワードが に渡されます。親コンポーネント。

2. 複数選択ボックスのフィルタリング

コードは次のとおりです。

<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 イベントがトリガーされ、選択されたオプションが親コンポーネントに渡されます。

3. 日付選択フィルター

コードは次のとおりです:

<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 イベントがトリガーされ、選択された日付範囲が親コンポーネントに渡されます。

4. 範囲選択フィルタリング

コードは次のとおりです:

<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 サイトの他の関連記事を参照してください。