So kapseln Sie die unbegrenzten Menükomponenten Vue3 Element-plus und el-menu

Die uns im Element bereitgestellte El-Menü-Komponente kann bis zu drei Ebenen der Verschachtelung erreichen. Wenn es eine weitere Ebene von Daten gibt, können Sie nur eine Ebene selbst über Variablen hinzufügen, was häufig der Fall ist Funktioniert nicht. Daher kann es nur gekapselt werden Eigene Komponenten , wenn eine Teilmenge vorhanden ist, verwenden Sie ihre eigene Komponente, um die untergeordneten Daten an sich selbst zu übergeben

2. Wenn keine Teilmenge vorhanden ist, verwenden Sie el-menu-item

Der folgende Code implementiert die Funktion setup() und die Setup-Syntax von Sugar jeweils

Setup-Syntax-Zucker

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: []
    }
 
]

Setup-Funktion

<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>

Der Typ kann entsprechend Ihrem eigenen Projekt definiert werden und kann vorübergehend in einen beliebigen geändert werden

3. Verwenden Sie zum Hinzufügen die Komponente

<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>

die standardmäßig aktive Variable

. Wenn Sie zu Beginn standardmäßig auf die erste Ebene klicken möchten, müssen Sie Muster in den Daten finden

Alle Ebenen abrufen, oder Sie können alle Ebenen nach Kacheln über die Schnittstelle abrufen

Zum Beispiel das Datenformat:

<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>

Das gewünschte Ergebnis sind die längsten und identischsten Zahlen. Das Element 1-1-1-1

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"
]

Verwenden Sie Split, um zu verhindern, dass einige Zeichenfolgen aus den zwei Ziffern 10 und 11 bestehen

Das obige ist der detaillierte Inhalt vonSo kapseln Sie die unbegrenzten Menükomponenten Vue3 Element-plus und el-menu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!