Vue+element implements drop-down menu with local search function example

Vue+element implements drop-down menu with local search function example

need:

The backend returns an array object, which is combined into an array on the frontend. The arrays are combined into arrays according to the name and the value returned by the backend is pushed into the array as a child. Custom attributes are used to back up data in the array to prevent the original array from being changed during the search, making the array unable to be rolled back.

insert image description here
insert image description here

Vuex storage is used here, because multiple pages use the same interface; so there is no need to repeat the request
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: Console-Data Access-Floating Menu* @FilePath: \vue-ui\src\store\module\metadata.js
 */
/**
 * Data resource management floating menu data */

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

let loadingInstance
const state = {
    allList: [],
    navList: [],
    name: {}
}
const mutations = {
    SET_NAVLIST: (state, list) => {
        // Use deep copy to prevent page search errors 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) {
                //Prevent duplicate requests 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) //Match the passed in name with the returned key(name) and put it in if (item) {
                                item.children = res.data[i] //Put the array under each object requested back into the corresponding Item.children item.navSearch = ''
                                item.backList = [] //Create a backup to prevent changes to the original array during search}
                        }
                        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
}

Page parent component uses child component
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 server',
                  children: [],
                  total: 0
              },
              {
                  imgSrc: require('./../../../../../public/images/m5.png'),
                  name: 'txt',
                  typeName: 'File Server',
                  children: [],
                  total: 0
              }
          ],
          
   },
  async mounted() {
    const param = {
        name: 'fileXs',
        navList: this.navList
    }
    // Request vuex
    this.navlist = await this.$store.dispatch('metadata/requestMetadata', param)
},

Subcomponents
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: Floating menu in data resource table* @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="Please enter keywords" 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">No data</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: {
        // Click on the content in the list 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()//Prevent input box assignment failure 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) {
                    // By default, the 0 menus under the expanded list are activated 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) //Default request for the first data content}
                    }
                }
            }
        }
    }
}
</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>

This is the end of this article about vue+element to implement a drop-down menu with local search function. For more relevant vue element drop-down menu search content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Vue3+Element+Ts implements basic search reset and other functions of the form
  • Vue+elementui realizes multiple selection and search functions of drop-down table
  • Vue elementui implements the example code of the search bar public component encapsulation
  • Vue+Element realizes the search keyword highlighting function
  • Vue Element grouping + multi-selection + searchable Select selector implementation example
  • How to use vue + element to implement table paging and front-end search
  • vue Element-ui input remote search and modification suggestion display template sample code
  • VUE+element development background management search function

<<:  Detailed explanation of MySQL redo log (redo log) and rollback log (undo logo)

>>:  Use of Linux ipcs command

Recommend

Nginx Service Quick Start Tutorial

Table of contents 1. Introduction to Nginx 1. Wha...

Detailed tutorial on installing MySQL 8.0.20 database on CentOS 7

Related reading: MySQL8.0.20 installation tutoria...

Vue realizes the progress bar change effect

This article uses Vue to simply implement the cha...

How to pass W3C validation?

In addition to setting regulations for various ta...

Solution to high CPU usage of Tomcat process

Table of contents Case Context switching overhead...

Usage of if judgment in HTML

In the process of Django web development, when wr...

How to set the page you are viewing to not allow Baidu to save its snapshot

Today, when I searched for a page on Baidu, becaus...

Introduction to the use of common Dockerfile commands

Table of contents 01 CMD 02 ENTRYPOINT 03 WORKDIR...

Summary of essential knowledge points for MySQL query optimization

Preface Query optimization is not something that ...

How to use Vue+ElementUI Tree

The use of Vue+ElementUI Tree is for your referen...

HTML table markup tutorial (1): Creating a table

<br />This is a series of tutorials provided...

Detailed summary of MySQL and connection-related timeouts

MySQL and connection related timeouts Preface: To...

Let's talk about parameters in MySQL

Preface: In some previous articles, we often see ...

A detailed introduction to Tomcat directory structure

Open the decompressed directory of tomcat and you...