如何在vue項目中利用餓了么UI實現一個teambition篩選功能

這篇文章主要為大家詳細介紹了如何在vue項目中利用餓了么UI實現一個teambition篩選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，發現的小伙伴們可以參考一下：

Vue的優點

Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。

功能效果有如下

• 需求一：常用篩選條件放在上面直接看到，不常用篩選條件放在添加篩選條件里面

• 需求二：篩選的方式有輸入框篩選、下拉框篩選、時間選擇器篩選等

• 需求三：如果覺得常用篩選條件比較多的話，可以鼠標移入點擊刪除，使之進入不常用的篩選條件里

• 需求四：也可以從不常用的篩選條件里面點擊對應篩選條件使之“蹦到”常用篩選條件里

• 需求五：點擊重置使之恢復到初試的篩選條件

• 需求六：用戶若是沒輸入內容點擊確認按鈕，就提示用戶要輸入篩選條件
  

思路分析

對于需求一和需求二，我們首先要搞兩個全屏幕彈框，然后在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代碼如下：

<div class="rightright">
         <el-input
          v-model.trim="item.content"
          clearable
          v-show="item.type == 1"
          placeholder="請輸入"
          size="small"
          :popper-append-to-body="false"
         ></el-input>
         <el-select
          v-model="item.optionArr"
          v-show="item.type == 2"
          multiple
          placeholder="請選擇"
         >
          <el-option
           v-for="whatItem in item.options"
           :key="whatItem.id"
           :label="whatItem.value"
           :value="whatItem.id"
           size="small"
          >
          </el-option>
         </el-select>
         <el-date-picker
          v-model="item.timeArr"
          v-show="item.type == 3"
          type="daterange"
          range-separator="至"
          start-placeholder="開始日期"
          end-placeholder="結束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
         >
         </el-date-picker>
        </div>

完整代碼在最后，大家先順著思路看哦

對于需求三需求四，可描述為，刪除上面的掉到下面。點擊下面的蹦到上面。所以對應操作就是把上面數組某一項追加到下面數組，然后把上面數組的這一項刪掉；把下面數組的某一項追加到上面數組，然后把這一行刪掉。（注意還有一個索引）對應代碼如下：

/* 點擊某一項的刪除小圖標，把這一項添加到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);
    }
   });
  },

對于需求五需求六就簡單了，對應代碼如下，完整代碼注釋中已經寫好了

完整代碼

<template>
 <div id="app">
  <div class="filterBtn">
   <el-button type="primary" size="small" @click="filterMaskOne = true">
    數據篩選<i class="el-icon-s-operation el-icon--right"></i>
   </el-button>
   <transition name="fade">
    <div
     class="filterMaskOne"
     v-show="filterMaskOne"
     @click="filterMaskOne = false"
    >
     <div class="filterMaskOneContent" @click.stop>
      <div class="filterHeader">
       <span>數據篩選</span>
      </div>
      <div class="filterBody">
       <div class="outPrompt" v-show="topData.length == 0">
        暫無篩選條件，請添加篩選條件...
       </div>
       <div
        class="filterBodyCondition"
        v-for="(item, index) in topData"
        :key="index"
       >
        <div
         class="leftleft"
         @mouseenter="mouseEnterItem(index)"
         @mouseleave="mouseLeaveItem(index)"
        >
         <span
          >{{ item.wordTitle }}：
          <i
           class="el-icon-error"
           v-show="whichIndex == index"
           @click="clickIcon(index)"
          ></i>
         </span>
        </div>
        <div class="rightright">
         <el-input
          v-model.trim="item.content"
          clearable
          v-show="item.type == 1"
          placeholder="請輸入"
          size="small"
          :popper-append-to-body="false"
         ></el-input>
         <el-select
          v-model="item.optionArr"
          v-show="item.type == 2"
          multiple
          placeholder="請選擇"
         >
          <el-option
           v-for="whatItem in item.options"
           :key="whatItem.id"
           :label="whatItem.value"
           :value="whatItem.id"
           size="small"
          >
          </el-option>
         </el-select>
         <el-date-picker
          v-model="item.timeArr"
          v-show="item.type == 3"
          type="daterange"
          range-separator="至"
          start-placeholder="開始日期"
          end-placeholder="結束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
         >
         </el-date-picker>
        </div>
       </div>
      </div>
      <div class="filterFooter">
       <div class="filterBtn">
        <el-button
         type="text"
         icon="el-icon-circle-plus-outline"
         @click="filterMaskTwo = true"
         >添加篩選條件</el-button
        >
        <transition name="fade">
         <div
          class="filterMaskTwo"
          v-show="filterMaskTwo"
          @click="filterMaskTwo = false"
         >
          <div class="filterMaskContentTwo" @click.stop>
           <div class="innerPrompt" v-show="bottomData.length == 0">
            暫無內容...
           </div>
           <div
            class="contentTwoItem"
            @click="clickBottomItem"
            v-for="(item, index) in bottomData"
            :key="index"
           >
            <div class="mingzi">
             {{ item.wordTitle }}
            </div>
           </div>
          </div>
         </div>
        </transition>
       </div>
       <div class="resetAndConfirmBtns">
        <el-button size="small" @click="resetFilter">重置</el-button>
        <el-button type="primary" size="small" @click="confirmFilter"
         >確認</el-button
        >
       </div>
      </div>
     </div>
    </div>
   </transition>
  </div>
 </div>
</template>

<script>
export default {
 name: "app",
 data() {
  return {
   filterMaskOne: false, // 分別用于控制兩個彈框的顯示與隱藏
   filterMaskTwo: false,
   whichIndex: -1, // 用于記錄點擊的索引
   apiFilterArr:[], //存儲用戶填寫的篩選內容
   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: [],
    },
   ],
  };
 },
 mounted() {
  // 在初始化加載的時候，我們就把我們配置的常用和不常用的篩選項保存一份
  // 當用戶點擊重置按鈕的時候，再取出來使其恢復到最初的篩選條件狀態
  sessionStorage.setItem("topData",JSON.stringify(this.topData))
  sessionStorage.setItem("bottomData",JSON.stringify(this.bottomData))
 },
 methods: {
  //鼠標移入顯示刪除小圖標
  mouseEnterItem(index) {
   this.whichIndex = index;
  },
  // 鼠標離開將索引回復到默認-1
  mouseLeaveItem() {
   this.whichIndex = -1;
  },
  /* 點擊某一項的刪除小圖標，把這一項添加到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);
    }
   });
  },
  // 點擊確認篩選
  async confirmFilter() {
   // 如果所有的輸入框的content內容為空，且選中的下拉框數組為空，且時間選擇器選中的數組為空
   // 就說明用戶沒有輸入內容，那么我們就提示用戶要輸入內容以后再進行篩選
   let isEmpty = this.topData.every((item)=>{
    return (item.content == "") && (item.optionArr.length == 0) && (item.timeArr.length == 0)
   })
   if(isEmpty == true){
     this.$alert('請輸入內容以后再進行篩選', '篩選提示', {
     confirmButtonText: '確定'
    });
   }else{
    // 收集參數發篩選請求，這里要分類型，把不為空的既有用戶輸入內容的
    // 存到存到數據篩選的數組中去，然后發請求給后端。
    this.topData.forEach((item)=>{
     if(item.type == 1){
      if(item.content != ""){
       let filterItem = {
        field:item.wordTitle,
        value:item.content
       }
       this.apiFilterArr.push(filterItem)
      }
     }else if(item.type == 2){
      if(item.optionArr.length > 0){
       let filterItem = {
        field:item.wordTitle,
        value:item.optionArr
       }
       this.apiFilterArr.push(filterItem)
      }
     }else if(item.type == 3){
      if(item.timeArr.length > 0){
       let filterItem = {
        field:item.wordTitle,
        value:item.timeArr
       }
       this.apiFilterArr.push(filterItem)
      }
     } 
    })
    // 把篩選的內容放到一個數組里面，傳遞給后端（當然不一定把參數放到數組里面）
    // 具體以怎樣的形式傳遞給后端，可以具體商量
    console.log("帶著篩選內容發請求",this.apiFilterArr);
   }
  },
  // 重置時，再把最初的配置篩選項取出來賦給對應的兩個數組
  resetFilter() {
   this.topData = JSON.parse(sessionStorage.getItem("topData"))
   this.bottomData = JSON.parse(sessionStorage.getItem("bottomData"))
  },
 },
};
</script>
<style lang="less" scoped>
.filterBtn {
 width: 114px;
 height: 40px;
 .filterMaskOne {
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.3);
  .filterMaskOneContent {
   position: absolute;
   top: 152px;
   right: 38px;
   width: 344px;
   height: 371px;
   background-color: #fff;
   box-shadow: 0px 0px 4px 3px rgba(194, 194, 194, 0.25);
   border-radius: 4px;
   .filterHeader {
    width: 344px;
    height: 48px;
    border-bottom: 1px solid #e9e9e9;
    span {
     display: inline-block;
     font-weight: 600;
     font-size: 16px;
     margin-left: 24px;
     margin-top: 16px;
    }
   }
   .filterBody {
    width: 344px;
    height: 275px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    padding: 12px 24px 0 24px;
    .outPrompt {
     color: #666;
    }
    .filterBodyCondition {
     width: 100%;
     min-height: 40px;
     display: flex;
     margin-bottom: 14px;
     .leftleft {
      width: 88px;
      height: 40px;
      display: flex;
      align-items: center;
      margin-right: 20px;
      span {
       position: relative;
       font-size: 14px;
       color: #333;
       i {
        color: #666;
        right: -8px;
        top: -8px;
        position: absolute;
        font-size: 15px;
        cursor: pointer;
       }
       i:hover {
        color: #5f95f7;
       }
      }
     }
     .rightright {
      width: calc(100% - 70px);
      height: 100%;
      /deep/ input::placeholder {
       color: rgba(0, 0, 0, 0.25);
       font-size: 13px;
      }
      /deep/ .el-input__inner {
       height: 40px;
       line-height: 40px;
      }
      /deep/ .el-select {
       .el-input--suffix {
        /deep/ input::placeholder {
         color: rgba(0, 0, 0, 0.25);
         font-size: 13px;
        }
        .el-input__inner {
         border: none;
        }
        .el-input__inner:hover {
         background: rgba(95, 149, 247, 0.05);
        }
       }
      }
      .el-date-editor {
       width: 100%;
       font-size: 12px;
      }
      .el-range-editor.el-input__inner {
       padding-left: 2px;
       padding-right: 0;
      }
      /deep/.el-range-input {
       font-size: 13px !important;
      }
      /deep/ .el-range-separator {
       padding: 0 !important;
       font-size: 12px !important;
       width: 8% !important;
       margin: 0;
      }
      /deep/ .el-range__close-icon {
       width: 16px;
      }
     }
    }
   }
   .filterFooter {
    width: 344px;
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 12px;
    border-top: 1px solid #e9e9e9;
    .filterBtn {
     .filterMaskTwo {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
      z-index: 1000;
      .filterMaskContentTwo {
       width: 240px;
       height: 320px;
       background: #ffffff;
       box-shadow: 0px 0px 4px 3px rgba(194, 194, 194, 0.25);
       border-radius: 4px;
       position: absolute;
       top: 360px;
       right: 180px;
       overflow-y: auto;
       box-sizing: border-box;
       padding: 12px 0 18px 0;
       overflow-x: hidden;
       .innerPrompt {
        color: #666;
        width: 100%;
        padding-left: 20px;
        margin-top: 12px;
       }
       .contentTwoItem {
        width: 100%;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        color: #333333;
        cursor: pointer;
        .mingzi {
         width: 100%;
         height: 36px;
         box-sizing: border-box;
         padding-left: 18px;
        }
       }
       .contentTwoItem:hover {
        background: rgba(95, 149, 247, 0.05);
       }
      }
     }
    }
   }
  }
 }
}
// 控制淡入淡出效果
.fade-enter-active,
.fade-leave-active {
 transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
 opacity: 0;
}
</style>

以上就是億速云小編為大家收集整理的如何在vue項目中利用餓了么UI實現一個teambition篩選功能，如何覺得億速云網站的內容還不錯，歡迎將億速云網站推薦給身邊好友。