elementui3侧边菜单栏可搜索

Element UI 是一个基于 Vue 2.0 的桌面端组件库，它提供了一套丰富的 UI 组件，使得开发者可以快速构建美观、易用的网页界面。在 Element UI 3.x 版本中，侧边菜单栏（Side Menu）组件可以通过添加搜索功能来提高用户的操作效率，尤其是在菜单项较多的情况下。

要实现 Element UI 侧边菜单栏的可搜索功能，通常需要结合搜索框组件（Search）和列表组件（List），以及动态绑定数据。以下是实现侧边菜单栏可搜索功能的基本步骤：

1. 在页面上添加一个搜索框组件，用户可以在该搜索框中输入关键词。
2. 将侧边菜单栏的数据绑定到一个动态列表中，这样菜单项可以根据数据变化而变化。
3. 为搜索框添加一个事件监听器，当用户输入搜索词时触发一个方法。
4. 在该方法中，根据输入的关键词过滤菜单栏绑定的数据源。
5. 使用过滤后的数据更新侧边菜单栏的数据源，从而实现菜单项的动态显示。

示例代码如下：

<template>
  <div>
    <el-input v-model="filterText" placeholder="请输入关键词搜索" @input="handleSearch"></el-input>
    <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :collapse="isCollapse">
      <el-menu-item v-for="item in filteredMenuItems" :index="item.index" :key="item.index">
        <i :class="item.icon"></i>
        <span slot="title">{{ item.title }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        // ... 原始菜单数据
      ],
      filterText: '', // 存储搜索关键词
      isCollapse: false // 控制菜单是否折叠
    };
  },
  computed: {
    // 计算过滤后的菜单项
    filteredMenuItems() {
      if (!this.filterText) return this.menuItems;
      return this.menuItems.filter(item => {
        return item.title.toLowerCase().includes(this.filterText.toLowerCase());
      });
    }
  },
  methods: {
    // 搜索处理方法
    handleSearch() {
      // 可以添加防抖等逻辑以提高性能
    }
  }
};
</script>

在上述示例代码中，我们定义了一个 `menuItems` 数组来存储菜单数据，同时使用 `filterText` 变量来存储用户输入的搜索关键词。计算属性 `filteredMenuItems` 根据 `filterText` 的值来过滤 `menuItems` 数组，并返回过滤后的菜单项。这样，侧边菜单栏就会根据用户的输入动态地显示相应的菜单项。