Comment encapsuler les composants de menu illimités de Vue3 Element-plus et el-menu

Le composant el-menu qui nous est fourni dans element peut atteindre jusqu'à trois niveaux d'imbrication. S'il y a une couche de données supplémentaire, nous ne pouvons ajouter qu'une seule couche par nous-mêmes via des variables. Si nous ajoutons deux ou trois couches, cela arrive souvent. ne fonctionne pas, donc il ne peut être qu'encapsulé

Rendu

1. Définir les données

MenuData.ts

export default [
    {
        id: "1",
        name: "第一级菜单",
        level: '1',
        child: [
            {
                id: "11",
                name: "第二级菜单",
                level: '1-1',
                child: [
                    {
                        id: "111",
                        name: "第三级菜单",
                        level: '1-1-1',
                        child: [
                            {
                                id: "1111",
                                name: "第四级菜单",
                                level: '1-1-1-1',
                                child: [
                                    {
                                        id: "11111",
                                        name: "第五级菜单",
                                        level: '1-1-1-1-1',
                                        child: []
                                    }
                                ]
                            }
                        ]
                    }]
            }
        ]
    },
    {
        id: "2",
        name: "第一级同级菜单",
        level: '2',
        child: []
    }
 
]

2. Encapsuler les composants

Idée d'emballage :

1. Recyclez le propres composants , s'il y a un sous-ensemble, utilisez son propre composant pour se transmettre les données enfants

2. S'il n'y a pas de sous-ensemble, utilisez el-menu-item

Le code suivant implémente la fonction setup() et la syntaxe de configuration sugar respectivement

syntaxe de configuration sugar

<template>
  <el-menu
    :default-active="defaultActive"
    :unique-opened="true"
    class="el-menu-vertical-demo"
  >
    <template v-for="item in menu">
      <!-- 如果有子集 -->
      <template v-if="item.child && item.child.length > 0">
        <el-sub-menu
          :key="item.id"
          :index="item.level"
          :disabled="item.meta?.disabled"
          :popper-append-to-body="false"
        >
          <template #title>
            <i :class="[item.meta?.icon]"></i>
            <!-- 添加空格 表示下级-->
            <span> {{ generateSpaces(item.level) }} </span>
            <span slot="title"> {{ item.name }}</span>
          </template>
          <MenuTree
            :menu="item.child"
            :defaultActive="defaultActive"
            @clickItem="clickItemHandle"
          />
        </el-sub-menu>
      </template>
      <!-- 如果没有子集 -->
      <template v-else>
        <el-menu-item
          :key="item.id"
          :index="item.level"
          :disabled="item.meta?.disabled"
          :popper-append-to-body="false"
          @click="clickItemHandle(item)"
        >
          <i :class="[item.meta?.icon]"></i>
          <!-- 添加空格 表示下级-->
          <span> {{ generateSpaces(item.level) }} </span>
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>
      </template>
    </template>
  </el-menu>
</template>
 
<script lang="ts" name="MenuTree" setup>
// 把下面代码变成setup语法糖的形式 
import type { PropType } from "vue";
import type { MenuItem } from "@/types/lesson";
// type 为了方便写成这样 可以根据自己项目设定type
 defineProps({
  menu: {
    type: Array as unknown as PropType<any[]>,
    required: true,
    default: () => [],
  },
  defaultActive: {
    type: String as unknown as PropType<string>,
    required: true,
    default: [],
  },
});
 
const emit = defineEmits(["update-active-path", "clickItem"]);
 
// 返回的空格字符串 用于显示菜单层级 
const generateSpaces = (level: string) => {
  let str = "";
  level.split("")  .filter((it) => it != "-") .forEach(() => {
      str += "　";
  });
  return str;
};
 
// 点击当前菜单项
const clickItemHandle = (item: MenuItem) => {
  emit("clickItem", item);
};
</script>
 
<style scoped lang="less">
.el-menu {
  width: 288px;
}
</style>

fonction de configuration

<template>
  <el-menu :default-active="defaultActive"  :unique-opened="true"   class="el-menu-vertical-demo"  >
    <template v-for="item in menu">
        <template v-if="item.child && item.child.length > 0">
          <el-sub-menu 
            :key="item.id"
            :index="item.level"
            :disabled="item.meta?.disabled"
            :popper-append-to-body="false"
          >
            <template #title>
              <i :class="[item.meta?.icon]"></i>
              <!-- 添加空格 表示下级-->
              <span> {{ generateSpaces(item.level) }} </span>
              <span slot="title"> {{ item.name }}</span>
            </template>
            <MenuTree :menu="item.child" :defaultActive="defaultActive"  @clickItem="clickItemHandle"  />
          </el-sub-menu>
        </template>
        <template v-else>
          <el-menu-item 
            :key="item.id"
            :index="item.level"
            :disabled="item.meta?.disabled"
            :popper-append-to-body="false"
            @click="clickItemHandle(item)"
          >
            <i :class="[item.meta?.icon]"></i>
            <!-- 添加空格 表示下级-->
            <span> {{ generateSpaces(item.level) }} </span>
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </template>
      </template>
  </el-menu>
</template>
 
<script lang="ts">
import { defineComponent, toRefs } from &#39;vue&#39;;
import type { PropType } from &#39;vue&#39;
import type {MenuItem} from &#39;@/types/lesson&#39;
export default defineComponent({
  name: &#39;MenuTree&#39;,
  props: {
    menu: {
      type: Array as unknown as PropType<any[]>,
      required: true,
      default: () => [],
    },
    defaultActive: {
      type: String as unknown as PropType<string>,
      required: true,
      default: &#39;&#39;,
    },
  },
  emits: [&#39;update-active-path&#39;,&#39;clickItem&#39;],
  setup(props, context) {
    const { menu, defaultActive } = toRefs(props);
 
    const generateSpaces = (level:string) => {
      let str = &#39;&#39;
      level.split(&#39;&#39;).filter(it=>it!=&#39;-&#39;).forEach(() => {
        str += &#39;　&#39;
      })
      return str
    }
 
    const clickItemHandle = (item:MenuItem) => {
      context.emit(&#39;clickItem&#39;, item)
    }
 
   
    return {
      clickItemHandle,
      menu,
      defaultActive,
      generateSpaces,
    }
  },
});
</script>
 
<style scoped lang="less">
  .el-menu {
    width: 288px;
  }
</style>

Le type ne sera pas ajouté Il peut être défini en fonction de votre propre projet et peut être temporairement modifié en n'importe quel

3 Utilisez le composant

<template>
 <MenuTree
        :menu="menuList"
        :defaultActive="defaultActive"
        @clickItem="handleMenuClick"
        :update-click="handleMenuClick"
      />
</template>
 
<script setup lang="ts">
import MenuTree from "./components/MenuTree.vue";
import type {MenuItem} from &#39;@/types/lesson&#39;
import menuData from &#39;./MenuData&#39;
 
const defaultActive = ref<string>(&#39;&#39;); // "1-1-1-1" 默认选中的数据
const menuList = ref(menuData)
 
const handleMenuClick = (item:MenuItem) => {
  console.log(&#39;父组件&#39;,item);
};
</script>

pour ajouter. la variable active par défaut Si vous souhaitez cliquer sur le premier calque par défaut au début, vous devez trouver des modèles dans les données

Obtenir tous les niveaux, ou vous pouvez obtenir tous les niveaux par tuiles via l'interface

. Par exemple, le format de données :

let arr = [  "1-1",
  "1-1-1",
  "1-1-1-1",
  "1-1-1-2",
  "1-1-1-3",
  "1-1-1-4",
  "1-1-1-5",
  "1-1-1-6",
  "1-1-2",
  "1-1-2-1"
]

Le résultat souhaité est le nombre le plus long et le plus identique L'élément 1-1-1-1

arr.sort((a,b)=> b.split('-').length - a.split('-').length)[0]

Utilisez split pour éviter que certaines chaînes soient composées de deux chiffres 10 et 11

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!