問題描述

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代碼如下：

<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 v-show='filterMaskOne' @click='filterMaskOne = false' > <div @click.stop> <div class='filterHeader'> <span>數據篩選</span> </div> <div class='filterBody'> <div v-show='topData.length == 0'>暫無篩選條件，請添加篩選條件... </div> <div v-for='(item, index) in topData':key='index' ><div @mouseenter='mouseEnterItem(index)' @mouseleave='mouseLeaveItem(index)'> <span >{{ item.wordTitle }}： <i 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 v-show='filterMaskTwo' @click='filterMaskTwo = false' > <div @click.stop> <div v-show='bottomData.length == 0'> 暫無內容... </div> <div @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的篩選功能的詳細內容，更多關于vue 仿寫teambition的篩選功能的資料請關注好吧啦網其它相關文章！