如何用Vue和饿了么UI实现类似Teambition的筛选功能？

本文共计2978个文字，预计阅读时间需要12分钟。

问题描述：Teambition软件是企业办公协同软件，相信部分朋友的公司已经使用过这款软件。其中的筛选功能颇具创意，本文将仿写其功能。

我们先看看最终做出来的效果图+大气的筛选效果。

问题描述

teambition软件是企业办公协同软件，相信部分朋友的公司应该用过这款软件。里面的筛选功能挺有意思，本篇文章，就是仿写其功能。我们先看一下最终做出来的效果图

大致的功能效果有如下

• 需求一：常用筛选条件放在上面直接看到，不常用筛选条件放在添加筛选条件里面
• 需求二：筛选的方式有输入框筛选、下拉框筛选、时间选择器筛选等
• 需求三：如果觉得常用筛选条件比较多的话，可以鼠标移入点击删除，使之进入不常用的筛选条件里
• 需求四：也可以从不常用的筛选条件里面点击对应筛选条件使之“蹦到”常用筛选条件里
• 需求五：点击重置使之恢复到初试的筛选条件
• 需求六：用户若是没输入内容点击确认按钮，就提示用户要输入筛选条件
  

思路分析

对于需求一和需求二，我们首先要搞两个全屏幕弹框，然后在data中定义两个数组，一个是放常用条件的数组，另外一个是放不常用条件的数组，常用条件v-for到第一个弹框里面，不常用条件v-for到第二个弹框里面。数组里面的每一项都要配置好对应内容，比如要有筛选字段名字，比如姓名、年龄什么的。有了筛选筛选字段名字以后，还有有一个类型type，在html中我们要写三个类型的组件、比如input输入框组件，select组件，时间选择器组件。