Amalan komponen Vue: pembangunan komponen penapisan data

Amalan komponen Vue: pembangunan komponen penapisan data

Dalam pembangunan Vue, penapisan data ialah salah satu fungsi yang biasa digunakan. Artikel ini akan membawa anda mengetahui lebih lanjut tentang penggunaan sebenar komponen Vue: pembangunan komponen penapisan data, menunjukkan proses pelaksanaannya melalui contoh kod khusus dan membantu anda memahami dengan mendalam penggunaan komponen Vue.

Pertama sekali, kami perlu menjelaskan keperluan kami, iaitu membangunkan komponen penapisan data yang boleh melakukan operasi penapisan mudah di bahagian hadapan, termasuk kotak input, kotak berbilang pilihan, pemilihan tarikh, pemilihan julat, dll., untuk memenuhi keperluan penapisan data dalam senario yang berbeza.

Mengikut keperluan, kita boleh membahagikan komponen kepada bahagian berikut:

1. Penapisan kotak input

Kod adalah seperti berikut:

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

Komponen ini mengandungi kotak input dan butang carian, dan pengguna memasukkan kata kunci dalam kotak input , selepas mengklik butang carian, acara search akan dicetuskan dan kata kunci carian akan dihantar kepada komponen induk. 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

Penapisan kotak berbilang pilihan

Kodnya adalah seperti berikut:

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

Komponen ini mengandungi kotak berbilang pilihan dan tajuk selepas pengguna memilih pilihan yang perlu ditapis dalam kotak berbilang pilihan, ia akan mencetuskan acara change dan menghantar pilihan yang dipilih kepada komponen induk.

Penapis pemilihan tarikh

Kodnya adalah seperti berikut: 🎜rrreee🎜Komponen ini mengandungi dua pemilih tarikh Pengguna boleh memilih tarikh mula dan tarikh tamat apabila dipilih, change dan hantar julat tarikh yang dipilih kepada komponen induk. 🎜
🎜Range Selection Filter 🎜🎜🎜 Kod adalah seperti berikut: 🎜rrreeee🎜 komponen ini mengandungi dua kotak input angka. /code> acara akan dicetuskan dan menghantar julat yang dipilih kepada komponen induk. 🎜🎜Empat komponen di atas boleh digunakan secara gabungan untuk mencapai saringan data berbilang dimensi. Dalam komponen induk, kita boleh menggabungkan sub-komponen ini untuk melengkapkan fungsi penapisan data yang lengkap. 🎜🎜Kodnya adalah seperti berikut: 🎜rrreee🎜Ini hanyalah beberapa contoh ringkas komponen penapisan Anda boleh menggabungkan dan mengembangkannya mengikut keperluan sebenar untuk memperkayakan keupayaan penapisan data anda. 🎜🎜Ringkasan🎜🎜Artikel ini memperkenalkan secara terperinci penggunaan praktikal komponen Vue: pembangunan komponen penapisan data, dan menyediakan berbilang contoh kod khusus untuk membolehkan pembaca memahami dengan lebih baik cara menggunakan komponen Vue. Dalam pembangunan harian, jika anda menghadapi keperluan untuk penyaringan data, anda boleh melaksanakannya melalui komponen di atas untuk meningkatkan kecekapan pembangunan dan pengalaman pengguna. 🎜

Atas ialah kandungan terperinci Amalan komponen Vue: pembangunan komponen penapisan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!