vue如何达成筛选功能？思路分析及代码解说

发布时间：2022-04-18 13:31:17 所属栏目：语言来源：互联网

导读：vue如何实现筛选功能？大家在一些网站或者软件上，应该都见过筛选功能，例如先筛选出符合条件的信息再搜索，这样能够提高搜索的准确度，因此这篇就主要仿写teambition软件的筛选功能，给大家介绍一下筛选功能是如何实现的。大致的功能效果有如下需求一：常

vue如何实现筛选功能？大家在一些网站或者软件上，应该都见过筛选功能，例如先筛选出符合条件的信息再搜索，这样能够提高搜索的准确度，因此这篇就主要仿写teambition软件的筛选功能，给大家介绍一下筛选功能是如何实现的。

大致的功能效果有如下
需求一：常用筛选条件放在上面直接看到，不常用筛选条件放在添加筛选条件里面
需求二：筛选的方式有输入框筛选、下拉框筛选、时间选择器筛选等
需求三：如果觉得常用筛选条件比较多的话，可以鼠标移入点击删除，使之进入不常用的筛选条件里
需求四：也可以从不常用的筛选条件里面点击对应筛选条件使之“蹦到”常用筛选条件里
需求五：点击重置使之恢复到初试的筛选条件
需求六：用户若是没输入内容点击确认按钮，就提示用户要输入筛选条件
思路分析
        对于需求一和需求二，我们首先要搞两个全屏幕弹框，然后在data中定义两个数组，一个是放常用条件的数组，另外一个是放不常用条件的数组，常用条件v-for到第一个弹框里面，不常用条件v-for到第二个弹框里面。数组里面的每一项都要配置好对应内容，比如要有筛选字段名字，比如姓名、年龄什么的。有了筛选筛选字段名字以后，还有有一个类型type，在html中我们要写三个类型的组件、比如input输入框组件，select组件，时间选择器组件。使用根据type类型通过v-show显示对应字段，比如input的type为1，select的type为2，时间选择器的type为3。是哪个type，就显示哪个组件。

        对应两个数组如下：

topData: [ // 配置常用的筛选项
    {
     wordTitle: "姓名",
     type: 1, // 1 为input 2为select 3为DatePicker
     content: "", // content为输入框绑定的输入数据
     options: [], // options为所有的下拉框内容,可以发请求拿到存进来，这里是模拟
     optionArr: [], // optionArr为选中的下拉框内容
     timeArr: [], // timeArr为日期选择区间
    },
    {
     wordTitle: "年龄",
     type: 1,
     content: "",
     options: [],
     optionArr: [],
     timeArr: [],

     wordTitle: "入职时间",
     type: 3,
     content: "",
     options: [],
     optionArr: [],
     timeArr: [],

（编辑：开发网_开封站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

Spring MVC和Struts2的	C++ partition 和stab
C++ STL map容器解说	C++ STL map容器迭代器