Pratique des composants Vue : développement de composants de filtrage de données

Pratique des composants Vue : développement de composants de filtrage de données

Dans le développement de Vue, le filtrage des données est l'une des fonctions couramment utilisées. Cet article vous amènera à en apprendre davantage sur l'utilisation réelle des composants Vue : le développement de composants de filtrage de données, à démontrer son processus de mise en œuvre à travers des exemples de code spécifiques et à vous aider à comprendre en profondeur l'utilisation des composants Vue.

Tout d'abord, nous devons clarifier nos besoins, qui sont de développer un composant de filtrage de données capable d'effectuer des opérations de filtrage simples sur le front-end, y compris les zones de saisie, les zones de sélection multiple, la sélection de date, la sélection de plage, etc., pour répondre aux besoins de filtrage des données dans différents scénarios.

Selon les besoins, nous pouvons diviser le composant en parties suivantes :

1. Filtrage de la zone de saisie

Le code est le suivant :

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

Ce composant contient une zone de saisie et un bouton de recherche, et l'utilisateur saisit des mots-clés dans dans la zone de saisie, après avoir cliqué sur le bouton de recherche, l'événement search sera déclenché et les mots-clés de recherche seront transmis au composant parent. 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>

该组件包含两个日期选择器，用户可以选择起始日期和结束日期，选中后将触发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>

该组件包含两个数字输入框，用户可以选择数值范围，选中后将触发change

Filtrage de zones à sélection multiple

Le code est le suivant :

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

Ce composant contient une zone à sélection multiple et un titre une fois que l'utilisateur a sélectionné l'option qui doit être filtrée. dans la zone de sélection multiple, il déclenchera l'événement change et transmettra l'option sélectionnée au composant parent.

Filtre de sélection de date

Le code est le suivant : 🎜rrreee🎜Ce composant contient deux sélecteurs de date L'utilisateur peut sélectionner la date de début et la date de fin. Une fois sélectionné, . change et transmettra la plage de dates sélectionnée au composant parent. 🎜<ol start="4">🎜Filtre de sélection de plage🎜🎜🎜Le code est le suivant : 🎜rrreee🎜Ce composant contient deux zones de saisie numérique L'utilisateur peut sélectionner une plage numérique. Une fois sélectionné, le <code>change<. l> sera déclenché et transmettra la plage sélectionnée au composant parent. 🎜🎜Les quatre composants ci-dessus peuvent être utilisés en combinaison pour réaliser un filtrage de données multidimensionnel. Dans le composant parent, nous pouvons combiner ces sous-composants pour compléter la fonction complète de filtrage des données. 🎜🎜Le code est le suivant : 🎜rrreee🎜Voici quelques exemples simples de composants de filtrage. Vous pouvez les combiner et les étendre en fonction des besoins réels pour enrichir vos capacités de filtrage de données. 🎜🎜Résumé🎜🎜Cet article présente en détail l'utilisation pratique des composants Vue : le développement de composants de filtrage de données, et fournit plusieurs exemples de code spécifiques pour permettre aux lecteurs de mieux comprendre l'utilisation des composants Vue. Dans le développement quotidien, si vous rencontrez le besoin de filtrer les données, vous pouvez le mettre en œuvre via les composants ci-dessus pour améliorer l'efficacité du développement et l'expérience utilisateur. 🎜</.>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!