- 所在位置：
- 首頁 >
- 編程技術(shù) >
- JavaScript >
- vue如何實現(xiàn)篩選功能？思路分析及代碼詳解
vue如何實現(xiàn)篩選功能？思路分析及代碼詳解
Admin 2021-04-29 群英技術(shù)資訊 1317 次瀏覽
vue如何實現(xiàn)篩選功能？大家在一些網(wǎng)站或者軟件上，應(yīng)該都見過篩選功能，例如先篩選出符合條件的信息再搜索，這樣能夠提高搜索的準確度，因此這篇就主要仿寫teambition軟件的篩選功能，給大家介紹一下篩選功能是如何實現(xiàn)的。
大致的功能效果有如下
- 需求一：常用篩選條件放在上面直接看到，不常用篩選條件放在添加篩選條件里面
- 需求二：篩選的方式有輸入框篩選、下拉框篩選、時間選擇器篩選等
- 需求三：如果覺得常用篩選條件比較多的話，可以鼠標移入點擊刪除，使之進入不常用的篩選條件里
- 需求四：也可以從不常用的篩選條件里面點擊對應(yīng)篩選條件使之“蹦到”常用篩選條件里
- 需求五：點擊重置使之恢復到初試的篩選條件
- 需求六：用戶若是沒輸入內(nèi)容點擊確認按鈕，就提示用戶要輸入篩選條件
思路分析
對于需求一和需求二，我們首先要搞兩個全屏幕彈框，然后在data中定義兩個數(shù)組，一個是放常用條件的數(shù)組，另外一個是放不常用條件的數(shù)組，常用條件v-for到第一個彈框里面，不常用條件v-for到第二個彈框里面。數(shù)組里面的每一項都要配置好對應(yīng)內(nèi)容，比如要有篩選字段名字，比如姓名、年齡什么的。有了篩選篩選字段名字以后，還有有一個類型type，在html中我們要寫三個類型的組件、比如input輸入框組件，select組件，時間選擇器組件。使用根據(jù)type類型通過v-show顯示對應(yīng)字段，比如input的type為1，select的type為2，時間選擇器的type為3。是哪個type，就顯示哪個組件。
對應(yīng)兩個數(shù)組如下：
topData: [ // 配置常用的篩選項
{
wordTitle: "姓名",
type: 1, // 1 為input 2為select 3為DatePicker
content: "", // content為輸入框綁定的輸入數(shù)據(jù)
options: [], // options為所有的下拉框內(nèi)容,可以發(fā)請求拿到存進來，這里是模擬
optionArr: [], // optionArr為選中的下拉框內(nèi)容
timeArr: [], // timeArr為日期選擇區(qū)間
},
{
wordTitle: "年齡",
type: 1,
content: "",
options: [],
optionArr: [],
timeArr: [],
},
{
wordTitle: "授課班級",
type: 2,
content: "",
options: [ // 發(fā)請求獲取下拉框選項
{
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: [],
},
],
對應(yīng)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="結(jié)束日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</div>
對于需求三需求四，可描述為，刪除上面的掉到下面。點擊下面的蹦到上面。所以對應(yīng)操作就是把上面數(shù)組某一項追加到下面數(shù)組，然后把上面數(shù)組的這一項刪掉；把下面數(shù)組的某一項追加到上面數(shù)組，然后把這一行刪掉。（注意還有一個索引）對應(yīng)代碼如下：
/* 點擊某一項的刪除小圖標，把這一項添加到bottomData數(shù)組中
然后把這一項從topData數(shù)組中刪除掉(根據(jù)索引判別是哪一項)
最后刪除一個就把索引置為初始索引 -1 */
clickIcon(i) {
this.bottomData.push(this.topData[i]);
this.topData.splice(i, 1);
this.whichIndex = -1;
},
// 點擊底部的項的時候，通過事件對象，看看點擊的是底部的哪一項
// 然后把對應(yīng)的那一項追加到topData中用于展示，同時把bottom數(shù)組
// 中的哪一項進行刪除
clickBottomItem(event) {
this.bottomData.forEach((item, index) => {
if (item.wordTitle == event.target.innerText) {
this.topData.push(item);
this.bottomData.splice(index, 1);
}
});
},
對于需求五需求六就簡單了，對應(yīng)代碼如下，完整代碼注釋中已經(jīng)寫好了
完整代碼
<template>
<div id="app">
<div class="filterBtn">
<el-button type="primary" size="small" @click="filterMaskOne = true">
數(shù)據(jù)篩選<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>數(shù)據(jù)篩選</span>
</div>
<div class="filterBody">
<div class="outPrompt" v-show="topData.length == 0">
暫無篩選條件，請?zhí)砑雍Y選條件...
</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="結(jié)束日期"
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">
暫無內(nèi)容...
</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:[], //存儲用戶填寫的篩選內(nèi)容
topData: [ // 配置常用的篩選項
{
wordTitle: "姓名",
type: 1, // 1 為input 2為select 3為DatePicker
content: "", // content為輸入框綁定的輸入數(shù)據(jù)
options: [], // options為所有的下拉框內(nèi)容
optionArr: [], // optionArr為選中的下拉框內(nèi)容
timeArr: [], // timeArr為日期選擇區(qū)間
},
{
wordTitle: "年齡",
type: 1,
content: "",
options: [],
optionArr: [],
timeArr: [],
},
{
wordTitle: "授課班級",
type: 2,
content: "",
options: [ // 發(fā)請求獲取下拉框選項
{
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() {
// 在初始化加載的時候，我們就把我們配置的常用和不常用的篩選項保存一份
// 當用戶點擊重置按鈕的時候，再取出來使其恢復到最初的篩選條件狀態(tài)
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數(shù)組中
然后把這一項從topData數(shù)組中刪除掉(根據(jù)索引判別是哪一項)
最后刪除一個就把索引置為初始索引 -1 */
clickIcon(i) {
this.bottomData.push(this.topData[i]);
this.topData.splice(i, 1);
this.whichIndex = -1;
},
// 點擊底部的項的時候，通過事件對象，看看點擊的是底部的哪一項
// 然后把對應(yīng)的那一項追加到topData中用于展示，同時把bottom數(shù)組
// 中的哪一項進行刪除
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內(nèi)容為空，且選中的下拉框數(shù)組為空，且時間選擇器選中的數(shù)組為空
// 就說明用戶沒有輸入內(nèi)容，那么我們就提示用戶要輸入內(nèi)容以后再進行篩選
let isEmpty = this.topData.every((item)=>{
return (item.content == "") && (item.optionArr.length == 0) && (item.timeArr.length == 0)
})
if(isEmpty == true){
this.$alert('請輸入內(nèi)容以后再進行篩選', '篩選提示', {
confirmButtonText: '確定'
});
}else{
// 收集參數(shù)發(fā)篩選請求，這里要分類型，把不為空的既有用戶輸入內(nèi)容的
// 存到存到數(shù)據(jù)篩選的數(shù)組中去，然后發(fā)請求給后端。
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)
}
}
})
// 把篩選的內(nèi)容放到一個數(shù)組里面，傳遞給后端（當然不一定把參數(shù)放到數(shù)組里面）
// 具體以怎樣的形式傳遞給后端，可以具體商量
console.log("帶著篩選內(nèi)容發(fā)請求",this.apiFilterArr);
}
},
// 重置時，再把最初的配置篩選項取出來賦給對應(yīng)的兩個數(shù)組
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>
總結(jié)
這里面需要注意的就是鼠標移入移出顯示對應(yīng)的刪除小圖標。思路大致就這樣。
以上就是關(guān)于vue實現(xiàn)篩選功能的思路以及代碼詳解，本文有完整 的代碼，有需要的朋友可以參考一下，希望對大家有幫助。
標簽：
vue實現(xiàn)篩選功能
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：[email protected]進行舉報，并提供相關(guān)證據(jù)，查實之后，將立刻刪除涉嫌侵權(quán)內(nèi)容。
猜你喜歡
-
JS中removeAttribute方法的用法是什么，具體如何應(yīng)用
這篇文章主要介紹了JS removeAttribute()方法實現(xiàn)刪除元素的某個屬性，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
-
jquery如何實現(xiàn)記分進度條效果？
這篇文章主要給大家分享jquery實現(xiàn)記分進度條效果的內(nèi)容，感興趣的朋友可以借鑒參考一下，希望大家閱讀完這篇文章能有所收獲，下面我們一起來學習一下吧。
-
小程序中商品列表倒計時的功能是怎樣制作的
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)列表倒計時功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
-
Vue中路由實現(xiàn)頁面跳轉(zhuǎn)不刷新怎么辦，如何解決
這篇文章主要介紹了Vue路由this.route.push跳轉(zhuǎn)頁面不刷新的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
-
JS中如何實現(xiàn)一個簡單的支付倒計時，方法是什么
這篇文章主要為大家詳細介紹了javaScript實現(xiàn)支付10秒倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
推薦內(nèi)容
- CSS中flex布局如何實現(xiàn)自動換行？
- 在HTML中如何讓button居中，有幾種方法
- JS中怎樣刪除數(shù)組末尾元素？教你兩種方法
- vue怎樣獲取url參數(shù)?教你兩種方法
- 如何用Python計算BMI指數(shù)？一文帶你看懂
- python怎樣獲取數(shù)組元素的下標？教你三種方法
- python中的ord函數(shù)有什么用？用法是什么？
- Python中array與list轉(zhuǎn)換如何做，方法是什么
- 在CSS中怎么實現(xiàn)一條橫線，方法是什么
- Python怎樣設(shè)計串口之間通信的程序
- phpstorm怎么使用和操作？一文帶你快速了解
- vue怎么給對象數(shù)組賦值？this.$set方法幫你解決
成為群英會員,開啟智能安全云計算之旅
立即注冊
專業(yè)資深工程師駐守
7X24小時快速響應(yīng)
一站式無憂技術(shù)支持
免費備案服務(wù)
關(guān)注或聯(lián)系群英網(wǎng)絡(luò)
7x24小時售前：400-678-4567
7x24小時售后：0668-2555666
24小時QQ客服
群英微信公眾號
CNNIC域名投訴舉報處理平臺
服務(wù)電話：010-58813000
服務(wù)郵箱：[email protected]
投訴與建議：0668-2555555
Copyright ? QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版權(quán)所有
增值電信經(jīng)營許可證 : B1.B2-20140078 ICP核準（ICP備案）粵ICP備09006778號 域名注冊商資質(zhì) 粵 D3.1-20240008
