vue+element實(shí)現(xiàn)下拉菜單并帶本地搜索功能示例詳解

更新時(shí)間：2021年09月17日 14:25:18 作者：周家大小姐.

這篇文章主要介紹了vue+element實(shí)現(xiàn)下拉菜單并帶本地搜索功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

需求:

后臺(tái)返回?cái)?shù)組對(duì)像,前端組合成數(shù)組,根據(jù)name組合成一個(gè)個(gè)數(shù)組并把后臺(tái)返回的值當(dāng)成一個(gè)children推入數(shù)組,在數(shù)組中自定義屬性備份數(shù)據(jù)防止搜索的時(shí)候改變?cè)瓟?shù)組使得數(shù)組無(wú)法回退

在這里插入圖片描述

這里是用的vuex存儲(chǔ),因?yàn)槎鄠€(gè)頁(yè)面使用同一個(gè)接口;所以沒(méi)必要重復(fù)請(qǐng)請(qǐng)求
src\store\module\metadata.js

/*
 * @Author: your name
 * @Date: 2021-09-02 15:46:45
 * @LastEditTime: 2021-09-16 17:39:53
 * @LastEditors: Please set LastEditors
 * @Description: 控制臺(tái)-數(shù)據(jù)接入-懸浮菜單
 * @FilePath: \vue-ui\src\store\module\metadata.js
 */
/**
 * 數(shù)據(jù)資源管理懸浮菜單數(shù)據(jù)
 */

import { Loading, Message } from 'element-ui'
import { apiManager } from '@/plugins/ajax'

let loadingInstance
const state = {
    allList: [],
    navList: [],
    name: {}
}
const mutations = {
    SET_NAVLIST: (state, list) => {
        // 使用深拷貝,防止頁(yè)面搜索時(shí)報(bào)錯(cuò)
        state.navList = list.map(item => {
            if (item.children) {
                item.backList = JSON.stringify(item.children)
            }
        })
    },
    SET_ALLLIST: (state, list) => {
        state.allList = list
    },
    SET_NAME: (state, obj) => {
        Object.assign(state.name, obj)
    }
}
const actions = {
    requestMetadata({ commit, state }, { name, navList }) {
        return new Promise(resolve => {
            const nameKey = Object.keys(state.name)
            if (nameKey.indexOf(name) !== -1) {
                //阻止重復(fù)請(qǐng)求
                resolve(state.name[name])
            } else {
                loadingInstance = Loading.service()
                state.name[name] = name
                apiManager
                    .post('/metadata/tableInfo/query')
                    .then(res => {
                        commit('SET_ALLLIST', res.data)
                        for (const i in res.data) {
                            const item = navList.find(v => v.name === i) //把傳入的name和請(qǐng)回來(lái)的key(name)匹配放入
                            if (item) {
                                item.children = res.data[i] //把請(qǐng)求回來(lái)的每個(gè)對(duì)象下的數(shù)組放入對(duì)應(yīng)的Item.children中
                                item.navSearch = ''
                                item.backList = [] //建立備份,在搜索的時(shí)候防止改變?cè)瓟?shù)組
                            }
                        }
                        commit('SET_NAVLIST', navList)
                        commit('SET_NAME', { [name]: navList })
                        resolve(navList)
                        loadingInstance.close()
                    })
                    .catch(err => {
                        resolve([])
                        loadingInstance.close()
                        Message.error(err)
                    })
            }
        })
    }
}

export default {
    namespaced: true,
    state,
    mutations,
    actions
}

頁(yè)面父組件使用子組件
src\views\console\dataAccessManage\dataResourceTable\FileXs.vue

 <transition name="component-fade" mode="out-in">
   <floating-menu v-show="isCollapse" :newList='navList' @getDatails='getDatails' />
</transition>

data() {
      return {
          navList: [
              {
                  imgSrc: require('./../../../../../public/images/m6.png'),
                  name: 'ftp',
                  typeName: 'FTP服務(wù)器',
                  children: [],
                  total: 0
              },
              {
                  imgSrc: require('./../../../../../public/images/m5.png'),
                  name: 'txt',
                  typeName: '文件服務(wù)器',
                  children: [],
                  total: 0
              }
          ],
          
   },
  async mounted() {
    const param = {
        name: 'fileXs',
        navList: this.navList
    }
    // 請(qǐng)求vuex
    this.navlist = await this.$store.dispatch('metadata/requestMetadata', param)
},

子組件
src\views\console\dataAccessManage\components\floatingMenu.vue

<!--
 * @Author: your name
 * @Date: 2021-09-02 14:01:58
 * @LastEditTime: 2021-09-16 17:43:10
 * @LastEditors: Please set LastEditors
 * @Description: 數(shù)據(jù)資源表中懸浮菜單
 * @FilePath: \vue-ui\src\views\console\dataAccessManage\components\floatingMenu.vue
-->
<template>
    <div class="data-sheet-main__nav" v-if="sjktcList.length || newList.length">
        <div>
            <div class="nav__item" v-for="(item,index) in sjktcList" :key="'info2-' + index">
                <div class="item_name sjk_name" :class="{ sjk_active: sjkActive == index }" @click="sjktcShow(item.type,index)">{{item.typeName}}</div>
            </div>
        </div>
        <!-- file -->
        <el-collapse class="nav__item" v-model="activeNames">
            <el-collapse-item class="item_name" :title="item.typeName" :name="item.typeName" v-for="(item,index) in newList" :key="index">
                <ul class="nav__item__list">
                    <li class="list__li">
                        <el-input v-input-val-bg v-model="item.navSearch" @input="handleNavSearch(item)" prefix-icon="el-icon-search" size="mini" placeholder="請(qǐng)輸入關(guān)鍵字" clearable></el-input>
                    </li>
                    <li v-for="(key,i) in item.children" :key="i" :class="{ 'list__li--active': key.id == dbId }" class="list__li" @click="getDatails(key,item)">
                        <span :title="key.name" class="list--title">{{key.name}}</span>
                        <span class="list--count">{{key.total || 0}}</span>
                    </li>
                    <li class="no-data" v-if="!item.children.length">暫無(wú)數(shù)據(jù)</li>
                </ul>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>
<script>
import { debounce } from '@/utils'
export default {
    name: 'floatingMenu',
    props: {
        sjktcList: {
            type: Array,
            default: () => []
        },
        newList: {
            type: Array,
            default: () => []
        }
    },
    components: {},
    data() {
        return {
            sjkActive: 0,
            navSearch: '',
            navChildData: [],
            dbId: '',
            activeNames: []
        }
    },
    mounted() {
    },
    methods: {
        // 點(diǎn)擊列表中的內(nèi)容
        getDatails(args, db) {
            this.dbId = args.id
            this.$emit('getDatails', { args, db })
        },
        // eslint-disable-next-line space-before-function-paren
        handleNavSearch: debounce(function (obj) {
            this.$forceUpdate()//防止input框賦值失敗
            const currlist = JSON.parse(obj.backList)
            if (obj.navSearch == '') {
                obj.children = currlist
            } else {
                obj.children = currlist.filter(item => {
                    return item.name.toLowerCase().indexOf(obj.navSearch.toLowerCase()) != -1
                })
            }
        }, 100),
        sjktcShow(type, i) {
            this.sjkActive = i
            this.$emit('sjktcShow', [type])
        }
    },
    watch: {
        newList: {
            deep: true,
            handler(list) {
                if (list) {
                    // 默認(rèn)激活顯示展開(kāi)list下的0個(gè)菜單
                    for (let i = 0; i < list.length; i++) {
                        const item = list[i]
                        if (!this.dbId && item.children.length) {
                            this.activeNames = item.typeName
                            this.getDatails(item.children[0], item)//默認(rèn)請(qǐng)求第一條數(shù)據(jù)內(nèi)容
                        }
                    }
                }
            }
        }
    }
}
</script>
<style lang='scss' scoped>
.data-sheet-main__nav {
    width: 180px;
    position: absolute;
    top: 0px;
    left: -190px;
    z-index: 100;
    background: #fff;
    border: 1px solid #6579fe;
    padding-top: 10px;
    .sjk_active {
        color: $theme !important;
    }
    .nav__item {
        position: relative;
        margin-bottom: 15px;

        .item_name {
            width: 100%;
            display: inline-block;
            padding-left: 17px;
            font-size: 14px;
            line-height: 24px;
            color: rgba(0, 0, 0, 0.85);
            /deep/.el-collapse-item__header {
                font-weight: bold;
                border-bottom: none;
                position: relative;
                padding-left: 15px;
                .el-collapse-item__arrow {
                    position: absolute;
                    left: 0;
                    transform: rotate(270deg);
                }
                .el-collapse-item__arrow.is-active {
                    transform: rotate(90deg);
                }
            }

            &:hover {
                cursor: pointer;
            }
        }
        .no-data {
            text-align: center;
            color: #999;
            padding: 10px 0;
            width: 100%;
        }
        img {
            width: 100%;
            height: 50px;
        }
        .nav__item--total {
            position: absolute;
            display: block;
            width: 30px;
            height: 30px;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 50%;
            line-height: 30px;
            border: 1px solid #71b1ec;
            box-shadow: 0 3px 6px #156d90;
            text-align: center;
            color: #fd0b0b;
            font-size: 16px; /*no*/
            top: 0;
            right: 0;
            transform: translate(25%, -20%);
        }
        .nav__item__list {
            display: flex;
            max-height: 246px;
            overflow-y: auto;
            flex-wrap: wrap;

            .list__li {
                width: 100%;
                margin-top: 5px;
                line-height: 30px;
                padding: 0 6px 0 17px;
                position: relative;
                cursor: pointer;
                color: #333;
                &:hover {
                    color: $blue;
                }
                .list--title {
                    width: 90px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    float: left;
                    &:hover {
                        color: #409eff;
                    }
                }
                .list--count {
                    color: #46a0fc;
                    float: right;
                }
            }
            .list__li--active {
                color: $blue;
            }
        }
    }
    /deep/.el-collapse {
        border-top: none;
    }
}
.data-sheet-main__list {
    flex: 1;
    margin-left: 20px;
    .list-header {
        flex-direction: column;

        .order {
            text-align: right;
            a {
                background: #6579fe;
                font-family: PingFangSC-Regular;
                font-size: 12px;
                line-height: 22px;
                color: #ffffff;
                padding: 6px;
                border-radius: 4px;
            }
        }
    }
    .handler--fixed-right {
        padding: 25px 10px;
    }
    .nodata {
        text-align: center;
        font-size: 16px;
    }
}
</style>

到此這篇關(guān)于vue+element實(shí)現(xiàn)下拉菜單并帶本地搜索功能的文章就介紹到這了,更多相關(guān)vue element下拉菜單搜索內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: