vue后端实现三级菜单

img


如何实现三级菜单啊，后端返回的数据是这样的

img


 <div class="userTable">
      <el-table ref="multipleTable" :height="tableHeight" :data="listData" row-key="id"
          :tree-props="{ children: 'children' }"  v-loading="listLoading" element-loading-text="loading"
        element-loading-spinner="el-icon-loading" element-loading-background="#fff" style="width: 100%" border
        class="min_table" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
        <el-table-column :label="$t('menuManage.menuName')" show-overflow-tooltip min-width="120" prop="name">
          <!-- <template slot-scope="scope">
            <pre>
            {{ scope.row }}
            </pre>
          </template> -->
        </el-table-column>
        <el-table-column prop="icon" :label="$t('menuManage.menuIcon')" min-width="120" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <i :class="['iconfont', row.icon]" style="font-size: 22px"></i>
          </template>
        </el-table-column>
</el-table>
    </div>

递归数据，循环遍历children

路由里设置

  • 这个问题的回答你可以参考下: https://ask.csdn.net/questions/1077757
  • 这篇博客你也可以参考下：Vue进阶（六十三）：如何使浏览器打开时，默认的文档模式就是标准模式
  • 除此之外, 这篇博客: vue实现多标签页，并实现可拖动、可刷新的标签栏中的 组件路由守卫 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • import Vue from 'vue';

/**
 * 刷新标签页需要清空keep-alive的缓存,因此需要获取keep-alive的cache, 且只需获取一次
 * 路由指向的组件的父级是keep-alive组件, 所以在其初次执行时获取其父组件即可获取页面缓存
 */
Vue.mixin({
    beforeRouteEnter(to, from, next) {
        next((vm) => {
            if (vm.$vnode.parent) {
                vm.$store.commit('indexTabBarStore/setIndexTabBarCache', {
                    cache: vm.$vnode.parent.componentInstance.cache,  //cache和keys未出现在官方文档中, 没准下一个版本就没了, 慎用!!!
                    keys: vm.$vnode.parent.componentInstance.keys
                });
            }
        })
    }
})
  • 您还可以看一下 jason老师的vue通用后台管理课程中的 一级菜单的实现小节, 巩固相关知识点
  • 以下回答由chatgpt基于相关博客总结生成:

    实现三级菜单的具体步骤如下：

    1. 在后端返回的数据中，应该包含每个级别菜单的名称、对应的子菜单数据（如果有的话）以及其他相关属性。

    2. 在前端代码中，首先需要将后端返回的数据保存到一个变量中，例如menus。

    3. 在Vue组件中，使用v-for指令迭代渲染菜单的每一级。

    ```html

    • {{ menu.name }}
    • {{ subMenu.name }}
    • {{ leaf.name }}

    ```

    注意：其中，menu、subMenu和leaf是迭代的项，具体的命名根据实际数据结构进行调整。

    1. 在Vue组件中，根据点击事件或其他交互方式获取用户选择的菜单项，可以使用一个变量selectedMenu来保存选中的菜单项（这个变量可以初始为空）。

    2. 在Vue组件中，根据用户选择的菜单项，过滤或提取对应的子菜单数据，并将子菜单数据保存在一个变量中，例如subMenus。

    javascript data() { return { menus: [], // 后端返回的菜单数据 selectedMenu: null, // 用户选择的菜单项 subMenus: [] // 用户选择菜单项的子菜单数据 } }, computed: { filteredSubMenus() { if (!this.selectedMenu) { return [] } // 根据选中的菜单项过滤子菜单数据 return this.menus.find(menu => menu.id === this.selectedMenu.id).subMenus || [] } },

    1. 在交互方式（例如菜单点击事件）触发时，更新selectedMenu的值，并通过计算属性filteredSubMenus获取到过滤后的子菜单数据。

    ```html

    • {{ subMenu.name }}

    ```

    1. 重复步骤5和步骤6，可以实现三级菜单的动态展示。

    在以上步骤中，关键的地方是根据用户选择的菜单项过滤子菜单数据，并将过滤后的数据渲染到页面中，这里使用了Vue的计算属性来实现。同时，根据业务需求可以适当调整代码，例如增加样式、添加更多交互逻辑等。

    参考资料中的代码段并不完整，无法直接使用。