vue仿写teambition的筛选功能（使用饿了么UI）

问题描述

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: 2,
          content: "",
          options: [ // 发请求获取下拉框选项
            {
              id: 1,
              value: "一班",
            },
            {
              id: 2,
              value: "二班",
            },
            {
              id: 3,
              value: "三班",
            },
          ],
          optionArr: [],
          timeArr: [],
        },
        {
          wordTitle: "入职时间",
          type: 3, 
          content: "", 
          options: [], 
          optionArr: [], 
          timeArr: [], 
        },
      ],
      bottomData: [ // 配置不常用的筛选项
        {
          wordTitle: "工号",
          type: 1,
          content: "",
          options: [],
          optionArr: [],
          timeArr: [],
        },
        {
          wordTitle: "性别",
          type: 2,
          content: "",
          options: [
            {
              id: 1,
              value: "男",
            },
            {
              id: 2,
              value: "女",
            },
          ],
          optionArr: [],
          timeArr: [],
        },
      ],

对应html代码如下：

完整代码在最后，大家先顺着思路看哦

• 对于需求三需求四，可描述为，删除上面的掉到下面。点击下面的蹦到上面。所以对应操作就是把上面数组某一项追加到下面数组，然后把上面数组的这一项删掉；把下面数组的某一项追加到上面数组，然后把这一行删掉。（注意还有一个索引）对应代码如下：

/* 点击某一项的删除小图标，把这一项添加到bottomData数组中
       然后把这一项从topData数组中删除掉(根据索引判别是哪一项) 
       最后删除一个就把索引置为初始索引 -1   */
    clickIcon(i) {
      this.bottomData.push(this.topData[i]);
      this.topData.splice(i, 1);
      this.whichIndex = -1;
    },
    // 点击底部的项的时候，通过事件对象，看看点击的是底部的哪一项
    // 然后把对应的那一项追加到topData中用于展示，同时把bottom数组
    // 中的哪一项进行删除
    clickBottomItem(event) {
      this.bottomData.forEach((item, index) => {
        if (item.wordTitle == event.target.innerText) {
          this.topData.push(item);
          this.bottomData.splice(index, 1);
        }
      });
    },

• 对于需求五需求六就简单了，对应代码如下，完整代码注释中已经写好了

完整代码

总结

这里面需要注意的就是鼠标移入移出显示对应的删除小图标。思路大致就这样，敲代码不易，咱们共同努力。