element导航菜单el-menu添加搜索功能

已于 2024-02-23 15:05:30 修改
阅读量652 收藏 1
点赞数 5
分类专栏： vue elementUI 文章标签： vue.js 前端 javascript
于 2024-02-23 14:50:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/galaxyJING/article/details/136256036
版权

element导航菜单-侧栏，自带的功能没有搜索或者模糊查询。

找了找资料

找到一个比较可行的，记录一下：

//index.vue的代码
<div style="overflow:auto">
          <el-menu :default-active="$route.path"
                   :default-openeds="openeds"
                   :unique-opened="true"
                   active-text-color="rgb(185, 143, 37)"
                   text-color="#ADE0F6"
                   class="el-menu-vertical-demo"
                   background-color="#042939"
                   style="border:0;">
            <MenuTree :menuList="newMenuList"></MenuTree>
          </el-menu>
</div>

//newMenuList组件的代码
  <div class="menuTree">
    <template v-for="(item,index) in menuList">
      <el-submenu :index="item.id +''"
                  :key="index+''"
                  v-if="item.children && item.children.length>0">
        <template slot="title">
          <span @click.stop="routerClick(item)">{{item.label}}</span>
        </template>
        <MenuTree :menuList="item.children"></MenuTree>
      </el-submenu>
      <el-menu-item v-else
                    :index="item.id+''"
                    :key="index+''">
        <span @click="routerClick(item)">{{item.label}}</span>
      </el-menu-item>
    </template>
  </div>

<script>
import MenuTree from "./menuTree";
export default {
  name: 'leftAside',
  components: { MenuTree },
  props: ['transactionList'],
  data () {
    return {
      openeds: ["1", "2", "3", "4"],
      pathNumber: "",
      activeName: "first",
      filterText: "",
      menuList: [
        {
          id: 1,
          label: '主控',
          children: [
            {
              id: 2,
              label: '场地管理',
              children: [
                {
                  id: 3,
                  label: '数据中心',
                  children: [
                    {
                      id: 4,
                      label: '机房1',
                      children: [
                        {
                          id: 5,
                          label: '3D机房',
                          value: "jifang"
                        },
                        {
                          id: 6,
                          label: '2D机房',
                          value: "jifang"
                        },
                      ]
                    }
                  ]
                },
                {
                  id: 7,
                  label: '配电室',
                  children: [
                    {
                      id: 8,
                      label: '配电间1',
                    },
                    {
                      id: 9,
                      label: '配电间2',
                    },
                    {
                      id: 10,
                      label: '配电间3',
                    },
                  ]
                },
                {
                  id: 11,
                  label: '网络间',
                  children: [
                    {
                      id: 12,
                      label: '交换机1',
                      value: "jiaohuanji"
                    },
                    {
                      id: 13,
                      label: '交换机2',
                      value: "jiaohuanji"
                    },
                  ]
                }
              ]
            },
            {
              id: 15,
              label: '监测系统',
              children: [
                {
                  id: 16,
                  label: '变压器监测',
                  children: [
                    {
                      id: 17,
                      label: '变压器组1',
                    },
                    {
                      id: 18,
                      label: '变压器组2',
                    },
                    {
                      id: 19,
                      label: '变压器组3',
                    },
                  ]
                },
                {
                  id: 20,
                  label: '高压柜监测',
                  children: [
                    {
                      id: 21,
                      label: '高压柜组1',
                    },
                    {
                      id: 22,
                      label: '高压柜组2',
                    },
                    {
                      id: 23,
                      label: '高压柜组3',
                    },
                  ]
                },
                {
                  id: 24,
                  label: '母排监测',
                  children: [
                    {
                      id: 25,
                      label: '母排柜1',
                      value: "mupai"
                    },
                    {
                      id: 26,
                      label: '母排柜2',
                      children: [
                        {
                          id: 27,
                          label: 'M-2-01',
                          value: "mupai"
                        },
                        {
                          id: 28,
                          label: 'M-2-02',
                          value: "mupai"
                        }
                      ]
                    },
                    {
                      id: 29,
                      label: '母排柜3',
                      children: [
                        {
                          id: 30,
                          label: 'M-3-01',
                          value: "mupai"
                        }, {
                          id: 31,
                          label: 'M-3-02',
                          value: "mupai"
                        },
                      ]
                    },
                    {
                      id: 32,
                      label: '母排柜4',
                      children: [
                        {
                          id: 33,
                          label: 'M-4-01',
                          value: "mupai"
                        }, {
                          id: 34,
                          label: 'M-4-02',
                          value: "mupai"
                        },
                      ]
                    },
                    {
                      id: 35,
                      label: '母排柜5',
                      children: [
                        {
                          id: 36,
                          label: 'M-5-01',
                          value: "mupai"
                        }, {
                          id: 37,
                          label: 'M-5-02',
                          value: "mupai"
                        },
                      ]
                    },
                  ]
                },
                {
                  id: 38,
                  label: '空调监测',
                  children: [
                    {
                      id: 39,
                      label: '精密空调',
                      children: [
                        {
                          id: 40,
                          label: 'KT-W-05EVC',
                          value: "kongtiaoEVC"
                        },
                        {
                          id: 41,
                          label: 'KT-E-01EVC',
                          value: "kongtiaoEVC"
                        },
                        {
                          id: 42,
                          label: 'KT-E-03EVC',
                          value: "kongtiaoEVC"
                        },
                        {
                          id: 43,
                          label: 'KT-E-04EVC',
                          value: "kongtiaoEVC"
                        },
                        {
                          id: 44,
                          label: 'KT-E-05EVC',
                          value: "kongtiaoEVC"
                        },
                        {
                          id: 45,
                          label: 'KT-E-02EMS',
                          value: "kongtiaoEMS"
                        },
                        {
                          id: 46,
                          label: 'KT-E-06EMS',
                          value: "kongtiaoEMS"
                        },
                        {
                          id: 47,
                          label: 'KT-W-02EMS',
                          value: "kongtiaoEMS"
                        },
                        {
                          id: 48,
                          label: 'KT-W-04EMS',
                          value: "kongtiaoEMS"
                        },
                        {
                          id: 49,
                          label: 'KT-W-06EMS',
                          value: "kongtiaoEMS"
                        },
                      ]
                    },
                    {
                      id: 50,
                      label: '列间空调',
                      children: [
                        {
                          id: 51,
                          label: '英维克',
                          children: [
                            { id: 52, label: "LJKT-L2-02-EV", value: "kongtiaoEV" },
                            { id: 53, label: "LJKT-L2-04-EV", value: "kongtiaoEV" },
                            { id: 54, label: "LJKT-L2-06-EV", value: "kongtiaoEV" }
                          ]
                        },
                        {
                          id: 55,
                          label: '海信',
                          children: [
                            { id: 56, label: "LJKT-L4-01-HX", value: "kongtiaoHX" },
                            { id: 57, label: "LJKT-L4-02-HX", value: "kongtiaoHX" },
                            { id: 58, label: "LJKT-L4-03-HX", value: "kongtiaoHX" },
                            { id: 59, label: "LJKT-L4-04-HX", value: "kongtiaoHX" },
                            { id: 60, label: "LJKT-L4-05-HX", value: "kongtiaoHX" },
                            { id: 61, label: "LJKT-L4-06-HX", value: "kongtiaoHX" },
                          ]
                        },
                        {
                          id: 62,
                          label: '维谛',
                          children: [
                            { id: 63, label: "WD-A25-1", value: "kongtiaoWD" },
                            { id: 64, label: "WD-A25-2", value: "kongtiaoWD" },
                            { id: 65, label: "WD-A25-3", value: "kongtiaoWD" },
                            { id: 66, label: "WD-A25-4", value: "kongtiaoWD" },
                            { id: 67, label: "WD-A25-5", value: "kongtiaoWD" },
                            { id: 68, label: "WD-A25-6", value: "kongtiaoWD" },
                          ]
                        },
                      ]
                    },
                  ]
                },
                {
                  id: 69,
                  label: 'UPS监测',
                  children: [
                    {
                      id: 70,
                      label: 'UPS-400KVA-1',
                      value: "UPS"
                    },
                    {
                      id: 71,
                      label: 'UPS-400KVA-2',
                      value: "UPS"
                    },
                    {
                      id: 72,
                      label: 'UPS-400KVA-3',
                      value: "UPS"
                    },
                    {
                      id: 73,
                      label: 'UPS-400KVA-4',
                      value: "UPS",
                      children: [
                        { id: 74, label: '电池组-1', value: "dianchi" },
                        { id: 75, label: '电池组-2', value: "dianchi" },
                        { id: 76, label: '电池组-3', value: "dianchi" },
                        { id: 77, label: '电池组-4', value: "dianchi" },

                      ]
                    },
                    {
                      id: 78,
                      label: 'UPS-200KVA-1',
                      value: "UPS",
                      children: [
                        { id: 79, label: '电池组-1', value: "dianchi" },
                        { id: 80, label: '电池组-2', value: "dianchi" },
                        { id: 81, label: '电池组-3', value: "dianchi" },
                        { id: 82, label: '电池组-4', value: "dianchi" },
                      ]
                    },
                    {
                      id: 83,
                      label: 'UPS-200KVA-2',
                      value: "UPS",
                      children: [
                        { id: 84, label: '电池组-1', value: "dianchi" },
                        { id: 85, label: '电池组-2', value: "dianchi" },
                        { id: 86, label: '电池组-3', value: "dianchi" },
                        { id: 87, label: '电池组-4', value: "dianchi" },
                      ]
                    },
                    {
                      id: 88,
                      label: 'UPS-200KVA-3',
                      value: "UPS",
                      children: [
                        { id: 89, label: '电池组-1', value: "dianchi" },
                        { id: 90, label: '电池组-2', value: "dianchi" },
                        { id: 91, label: '电池组-3', value: "dianchi" },
                        { id: 92, label: '电池组-4', value: "dianchi" },
                      ]
                    },
                    {
                      id: 93,
                      label: 'UPS-200KVA-4',
                      value: "UPS",
                      children: [
                        { id: 94, label: '电池组-1', value: "dianchi" },
                        { id: 95, label: '电池组-2', value: "dianchi" },
                        { id: 96, label: '电池组-3', value: "dianchi" },
                        { id: 97, label: '电池组-4', value: "dianchi" },
                      ]
                    },
                    {
                      id: 98,
                      label: '智能电表ET903',
                      children: [
                        { id: 99, label: '200UPS输入柜', value: "dianbiao" },
                        { id: 100, label: '200UPS输出柜', value: "dianbiao" },
                        { id: 101, label: '400UPS输入', value: "dianbiao" },
                        { id: 102, label: '400UPS输入旁路', value: "dianbiao" },
                        { id: 103, label: '400UPS输出', value: "dianbiao" },
                        { id: 104, label: '空调柜', value: "dianbiao" },
                      ]
                    },
                  ]
                },
                {
                  id: 105,
                  label: '漏水监测',
                  children: [
                    { id: 106, label: '机房漏水传感器', value: "jinglou" },
                    { id: 107, label: 'UPS漏水传感器', value: "UPSlou" },
                  ]
                },
                {
                  id: 108,
                  label: '市电监测',
                  children: [
                    { id: 109, label: '市电监控1', },
                    { id: 110, label: '市电监控2', },
                  ]
                },
              ]
            }]
        }
      ],
      newMenuList: [],
      // 当前筛选名称
      nameUser: '',
      // 当前筛选id
      nameId: [],
      // nameId: '',
      // 接受条件结果数组
      arr: [],
      // 接受条件结果对象
      obj: {},
      // 接受条件结果children
      children: [],
      // 模糊查询数组
      fuzzyArr: [],
      fuzzyChildrenArr: [],
      fuzzyChildrenArr1: [],
      fuzzyChildrenArr2: [],
      fuzzyChildrenArr3: [],
      fuzzyFlag: true,
      // 字节点
      newNodeId: []
    }
  },

  mounted () {
    console.log(this.menuList);
    if (this.transactionList) {
      this.newMenuList = this.transactionList
    } else {
      this.newMenuList = this.menuList
    }
  },

  methods: {
    // 差一个模糊查询
    search (val) {
      // 初始化
      this.arr = []
      this.nameId = []
      this.obj = {}
      this.children = []
      this.fuzzyArr = []
      this.fuzzyChildrenArr = []
      this.fuzzyChildrenArr1 = []
      this.fuzzyChildrenArr2 = []
      this.fuzzyChildrenArr3 = []
      // 正布
      if (val) {
        this.nameUser = val
        // 获取id
        this.searchDg(this.menuList)
        // 遍历id查值
        if (this.nameId.length > 1) {
          for (var j = 0; j < this.nameId.length; j++) {
            this.arr.push(this.findPathByLeafId(this.nameId[j], this.menuList))
          }
          for (var q = 0; q < this.arr.length - 1; q++) {
            if (this.arr[q][this.arr[q].length - 2].id != this.arr[q + 1][this.arr[q + 1].length - 2].id) {
              this.fuzzyFlag = false
            } else {
              continue
            }
          }
          // 数组 arr 
          // 最里层的children
          for (var i = 0; i < this.arr.length - 1; i++) {
            if (this.arr[i][this.arr[i].length - 2].id == this.arr[i + 1][this.arr[i + 1].length - 2].id) {
              this.fuzzyChildrenArr1.push(this.arr[i][this.arr[i].length - 1])
            } else {
              this.fuzzyChildrenArr1.push(this.arr[i][this.arr[i].length - 1])
              this.fuzzyChildrenArr2.push(this.fuzzyChildrenArr1)
              this.fuzzyChildrenArr3.push(this.arr[i][this.arr[i].length - 2])
              this.fuzzyChildrenArr1 = []
            }
          }
          if (!this.fuzzyFlag) {
            if (i == this.arr.length - 1) {
              // 子
              this.fuzzyChildrenArr1.push(this.arr[i][this.arr[i].length - 1])
              this.fuzzyChildrenArr2.push(this.fuzzyChildrenArr1)
              // 父
              this.fuzzyChildrenArr3.push(this.arr[i][this.arr[i].length - 2])
              this.fuzzyChildrenArr1 = []
              // 重新赋值
              this.fuzzyChildrenArr = this.fuzzyChildrenArr2
            }
          } else {
            this.fuzzyChildrenArr = this.fuzzyChildrenArr1
          }
          // 判断是多组还是单组
          if (this.fuzzyFlag) {
            for (var i = this.arr[0].length - 2; i >= 0; i--) {
              this.obj = this.arr[0][i]
              if (i == this.arr[0].length - 2) {
                this.obj.children = this.fuzzyChildrenArr
              }
              else if (i !== this.arr[0].length - 1) {
                this.obj.children = [this.arr[0][i + 1]]
              }
            }
          } else {
            for (var w = 0; w < this.fuzzyChildrenArr3.length; w++) {
              this.fuzzyChildrenArr3[w].children = this.fuzzyChildrenArr[w]
            }

            for (var i = this.arr[0].length - 2; i >= 0; i--) {
              this.obj = this.arr[0][i]
              if (i == this.arr[0].length - 3) {
                this.obj.children = this.fuzzyChildrenArr3
              }
              else if (i !== this.arr[0].length - 1) {
                this.obj.children = [this.arr[0][i + 1]]
              }
            }
          }
          this.newMenuList = [this.obj]
        } else {
          this.arr = this.findPathByLeafId(this.nameId, this.menuList)
          // 单条
          for (var i = this.arr.length - 1; i >= 0; i--) {
            this.obj = this.arr[i]
            if (i !== this.arr.length - 1) {
              this.obj.children = [this.arr[i + 1]]
            }
          }
          this.newMenuList = [this.obj]
        }
      } else {
        this.newMenuList = this.menuList
      }
    },
    searchDg (data) {
      data.forEach(item => {
        if (item.label.includes(this.nameUser)) {
          this.nameId.push(item.id)
        } else {
          if (item.children) {
            this.searchDg(item.children)
          }
        }
      })
    },
    // 找出自己所在的位置的id和label  层级
    findPathByLeafId (leafId, nodes, path) {
      if (path === undefined) {
        path = [];
      }
      for (var i = 0; i < nodes.length; i++) {
        var tmpPath = path.concat();
        tmpPath.push({ id: nodes[i].id, label: nodes[i].label });
        if (leafId == nodes[i].id) {
          return tmpPath;
        }
        if (nodes[i].children) {
          var findResult = this.findPathByLeafId(leafId, nodes[i].children, tmpPath);
          if (findResult) {
            return findResult;
          }
        }
      }
    },
    // 查询子节点
  }
}
</script>

LXXgalaxy
关注
  • 5
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
element-ui组件的使用，导航菜单（NavMenu）组件、分页组件的使用
嗨皮的博客
02-01 6579
基于vue2项目中elementUI组件的简单使用方法
element导航菜单添加搜索功能
晚星的博客
04-27 4217
element官方文档中 他是一个树状结构的菜单，这个菜单没有属性可以去对他进行菜单的搜索,或者模糊查询 我自己给这个菜单封装了一个查询功能，下面是代码： 布局代码： //index.vue的代码 <div style="overflow:auto"> <el-menu :default-active="$route.path" :default-openeds="openeds" :un
el-menu导航的使用
m0_59290344的博客
10-30 326
el-menu导航的使用
element ui的el-menu增加多层级搜索功能
最新发布
爱米酱的博客
04-09 169
【代码】element ui的el-menu增加多层级搜索功能。
Element NavMenu导航菜单的使用方法
12-30
组件—导航菜单 顶栏 处理中心 我的工作台 选项1 <el-menu-item index=2-2
element-ui使用导航栏跳转路由的用法详解
12-29
最近初学vue，试着做一个小项目熟悉语法与思想，其中使用elemen-ui的导航栏做路由跳转切换页面。下面记录一下学习过程 element-ui引入vue项目的用法参考element官网 首先复制官网的例子，在这基础上再修改成我们想要的样子。 处理中心 <temp
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
主要介绍了使用element-ui的el-menu导航选中后刷新页面保持当前选中状态，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Element -Ui之NavMenu导航栏
m0_50007683的博客
05-03 9948
一、NavMenu重要标签和参数说明 mode：导航栏的模式，默认值vertical 导航栏处于垂直状态，改为horizonta可变为水平模式。 index：唯一标志。 default-active：激活当前菜单的index。 router： 是否使用路由，启用后可以通过index作为地址进行跳转。 <el-menu-item index="1">导航栏中的子菜单标签。 <el-submenu> 生成二级菜单。 代码实现..
让网站更美观：element 实现导航栏收起展开功能
Shids_的博客
01-16 1万+
让网站更美观：element 实现导航栏收起展开功能
Elementui中El-menu导航栏
~~
06-09 1万+
el-menu官方文档：Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/menu 导航栏水平时去除底部白边： 注意：水平时去除底部白边是用的新添加的style标签实现的。其他方式不行，如用::deep，或者直接在原来的style中改，都不行 侧边栏展开时宽度：
【VUE】Vue2菜单搜索并跳转指定页面
SZnAl的博客
03-28 2589
有时候后台管理系统复杂的菜单结构与更深的层级使用户无法快速找到自己所需的页面，如何提高后台管理系统的便捷度并且使系统与用户的交互更加灵活成为了项目在基础功能之外更重要的追求。菜单目录支持搜索并且可直接跳转便可以达到以上诉求。
element-ui 实现响应式导航栏的示例代码
11-21
开始之前 按照计划，前端使用Vue.js+Element UI，但在设计导航栏时，发现element没有提供传统意义上的页面顶部导航栏组件，只有一个可以用在很多需要选择tab场景的导航菜单，便决定在其基础上改造，由于我认为实现移动端良好的体验是必须的，所以便萌生了给其增加响应式功能的想法。 需求分析与拆解 假设我们的导航栏有logo和四个el-menu-item。 给window绑定监听事件，当宽度小于a时，四个链接全部放入右侧el-submenu的子菜单： 当宽度大于a时，右侧el-submenu不显示，左侧el-menu-item正常显示： 所以，先创建一个数组，存储所有所需的
vue+element实现下拉菜单并带本地搜索功能
周家大小姐
09-16 1330
需求: 后台返回数组对像,前端组合成数组,根据name组合成一个个数组并把后台返回的值当成一个children推入数组,在数组中自定义属性备份数据防止搜索的时候改变原数组使得数组无法回退 这里是用的vuex存储,因为多个页面使用同一个接口;所以没必要重复请请求 src\store\module\metadata.js /* * @Author: your name * @Date: 2021-09-02 15:46:45 * @LastEditTime: 2021-09-16 17:39:53
el-tree(element-plus)搜索树形菜单，并且带全选多选功能
yasuo56的博客
05-11 3832
el-tree(element-plus)搜索树形菜单，并且带全选多选功能
Vue开发实例（11）之el-menu实现左侧菜单导航
热门推荐
编程界明世隐的博客
05-02 4万+
el-menu实现左侧菜单导航 Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！ 即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单
element—el-menu
m0_37616866的博客
07-10 1136
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
element ui+vue制作导航栏菜单（完整）
ahwangzc的博客
02-08 1222
左侧菜单样式
【vue3】element el-menu，前端做菜单搜索
Write less，do more
07-22 2278
前端过滤函数，前端搜索菜单
element-ui el-menu
07-27
Element-UI 是一个基于 Vue.js 的 UI 组件库，而 el-menu 是 Element-UI 中的一个组件，用于创建菜单导航。 el-menu 组件可以帮助我们快速构建垂直或水平的导航菜单。它提供了多种样式和布局选项，可以灵活地满足各种项目的需求。 el-menu 组件的主要属性包括： - mode：设置菜单的模式，可以是水平模式（horizontal）或垂直模式（vertical）。 - default-active：设置默认激活的菜单项，可以是菜单项的 index 属性或者 path 属性。 - unique-opened：设置是否只保持一个子菜单的展开状态。 - collapse：设置是否折叠菜单。 - router：设置是否开启路由模式，用于处理菜单项的跳转。 除了上述属性之外，el-menu 还提供了一些事件和方法，用于处理菜单的交互行为。可以通过监听事件或者调用方法来实现菜单项的点击、展开、收起等操作。 需要注意的是，el-menu 是 Element-UI 的一部分，使用前需要先安装 Element-UI，并在项目中引入相应的样式和组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LXXgalaxy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值