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>

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

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

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

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