Vue 组件实战：数据筛选组件的开发及代码实例详解

咱平时用Vue开发的时候，老是要挑选合适的数据，就跟挑水果似的，得挑好看有水分还新鲜的。今儿个我来给你讲讲怎么搞定这个数据筛选的事儿，让你轻轻松松就能弄明白，学起来也不费劲！

明确需求：组件的功能和目标

首先得知道我们要弄个什么东西，就是做个能快速在网上找数据的小助手。也就是说，你可以输入关键词查找，可以勾选多个选项，甚至用日期和范围来细化查找信息。所以，这个小工具得简单明了，容易操作，便于大家快速找到所需的内容。

组件设计：输入框筛选的实现

用这个小小的搜索框你就知道了？只需要输入你想搜的，然后轻轻一按搜索按钮就能找到答案了！这就是我用Vue的event系统做到的。仔细看的话，你应该能注意到当你输入关键词并点击搜索按钮时，组件会发送一个search的事件，然后将关键词传递给父组件，父组件就能马上找到对应的信息啦

组件设计：多选框筛选的实现

  

    
    搜索
  


export default {
  data() {
    return {
      value: ""
    };
  },
  methods: {
    changeInput(event) {
      this.value = event.target.value;
    },
    search() {
      this.$emit("search", this.value);
    }
  }
};


.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;
}

来看看这种玩法吧——多选框比赛。其实我们都懂得这个小玩意儿？真的超简单，就是从一堆里挑出几个来。但是在咱们这里，这种看似微不足道的多选框可是太太好用用户只要随意选择她们心爱的宝贝，轻轻一按，组件就会给出“变化中”的信号，同时被选中的内容也会传递到上层组件。这样一来，高层的组件就能利用这些信息更快地进行筛选。

组件设计：日期选择筛选的实现

  

    
{{ title }}
    
      {{ item.label }}
    
  


export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      checkedList: []
    };
  },
  methods: {
    handleChange(checkedList) {
      this.$emit("change", checkedList);
    }
  }
};


.checkbox-filter {
  margin-bottom: 10px;
}
.checkbox-filter .title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

咱这儿有俩日期挑选的小帮手，想用哪个就用哪个，挑个开头日子和截止日，轻轻一点，”变化”按钮就亮起来，新期限一目了然就在屏幕最上面显示这时候，图表也会自动跟着新期限来展示数据，简直太方便了！

组件设计：范围选择筛选的实现

咱们来聊聊怎么用范围筛选。其实就是根据数字大小选择。在我们程序里面用起来很简单，就两个数输入框。填好筛选值的范围就能开始工作，然后将范围传输给爸爸（即程序代码），这样他就能按照这个范围挑选出合适的数字了。

  

    
      
        
      
      
        
      
    
  


export default {
  data() {
    return {
      start: "",
      end: ""
    };
  },
  methods: {
    handleChange() {
      this.$emit("change", {
        start: this.start,
        end: this.end
      });
    }
  }
};


.date-filter {
  margin-bottom: 10px;
}

组件组合：实现多维度数据筛选

搞定这些小东西儿（选单选项、复选框选、日期和时间），让你轻松挑选数据。会用的话，父组件就可以变成强大无比的筛选器，用起来轻车熟路超顺手！

实战演练：代码实现与应用

  

    
      
        
      
      
        
      
    
  


export default {
  data() {
    return {
      min: 0,
      max: 0
    };
  },
  methods: {
    handleChange() {
      this.$emit("change", {
        min: this.min,
        max: this.max
      });
    }
  }
};


.range-filter {
  margin-bottom: 10px;
}

来瞅瞅几个真应用的示例！Vue各种神奇的地方就在于它的组件有着各自独特的功能，对信息处理的做法也是五花八门。了解清楚这些简单上手的代码，用起Vue组件来就会得心应手啦～还能学会怎么巧妙搭配它们，满足各种各样的需求！

总结与展望：提升开发效率和用户体验

搞定了这篇文，你就能熟练使用数据筛选神器。而且小编给你案例实操教你如何上手操作！这个功能在编程时非常实用，既省时间又让用户觉得自在。好处当然不止这些，对？

聊聊呗~你们有没遇到过头疼的数据筛选问题？那时候肿么解决的呀？快来和我们说说，大家可以共同进步，以Vue组件提升用户感受。别忘点个赞分享！

  

    
    
    
    
  


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);
    }
  }
};


.filter-container {
  margin: 20px;
}